kandi background
Explore Kits

anime | JavaScript animation engine | Animation library

 by   juliangarnier JavaScript Version: v3.2.1 License: MIT

 by   juliangarnier JavaScript Version: v3.2.1 License: MIT

Download this library from

kandi X-RAY | anime Summary

anime is a JavaScript library typically used in User Interface, Animation applications. anime has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i engine-fork' or download it from GitHub, npm.
JavaScript animation engine
Support
Support
Quality
Quality
Security
Security
License
License
Reuse
Reuse

kandi-support Support

  • anime has a medium active ecosystem.
  • It has 40224 star(s) with 3284 fork(s). There are 768 watchers for this library.
  • It had no major release in the last 12 months.
  • There are 143 open issues and 471 have been closed. On average issues are closed in 86 days. There are 13 open pull requests and 0 closed requests.
  • It has a neutral sentiment in the developer community.
  • The latest version of anime is v3.2.1
anime Support
Best in #Animation
Average in #Animation
anime Support
Best in #Animation
Average in #Animation

quality kandi Quality

  • anime has 0 bugs and 0 code smells.
anime Quality
Best in #Animation
Average in #Animation
anime Quality
Best in #Animation
Average in #Animation

securitySecurity

  • anime has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
  • anime code analysis shows 0 unresolved vulnerabilities.
  • There are 0 security hotspots that need review.
anime Security
Best in #Animation
Average in #Animation
anime Security
Best in #Animation
Average in #Animation

license License

  • anime is licensed under the MIT License. This license is Permissive.
  • Permissive licenses have the least restrictions, and you can use them in most projects.
anime License
Best in #Animation
Average in #Animation
anime License
Best in #Animation
Average in #Animation

buildReuse

  • anime releases are available to install and integrate.
  • Deployable package is available in npm.
  • Installation instructions, examples and code snippets are available.
  • anime saves you 4995 person hours of effort in developing the same functionality from scratch.
  • It has 10513 lines of code, 0 functions and 45 files.
  • It has low code complexity. Code complexity directly impacts maintainability of the code.
anime Reuse
Best in #Animation
Average in #Animation
anime Reuse
Best in #Animation
Average in #Animation
Top functions reviewed by kandi - BETA

kandi has reviewed anime and discovered the below as its top functions. This is intended to give you an instant insight into anime implemented functionality, and help decide if they suit your requirements.

  • Style .
  • The Parser class
  • Create an Animation
  • Create an anime player
  • Create demo .
  • Drag an element .
  • Creates a new stagger with the given values .
  • Simulate a spring with a stiffness .
  • Animate the shape
  • Sets the animation progress step

anime Key Features

JavaScript animation engine

Download

copy iconCopydownload iconDownload
$ npm install animejs --save

Usage

copy iconCopydownload iconDownload
import anime from 'animejs/lib/anime.es.js';

Hello world

copy iconCopydownload iconDownload
anime({
  targets: 'div',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration: 800
});

Why does Rails rollback even though the model exists?

copy iconCopydownload iconDownload
class User < ApplicationRecord
  has_secure_password
  validates :password, presence: true, confirmation: true
end
>> User.create(email: 'test@user.com', password: '123456');
>> User.first.update!(email: 'test@user.com')
  User Load (0.8ms)  SELECT "users".* FROM "users" ORDER BY "users"."id" ASC LIMIT $1  [["LIMIT", 1]]
ActiveRecord::RecordInvalid: Validation failed: Password can't be blank
has_secure_password validations: false
# + your password validations
-----------------------
class User < ApplicationRecord
  has_secure_password
  validates :password, presence: true, confirmation: true
end
>> User.create(email: 'test@user.com', password: '123456');
>> User.first.update!(email: 'test@user.com')
  User Load (0.8ms)  SELECT "users".* FROM "users" ORDER BY "users"."id" ASC LIMIT $1  [["LIMIT", 1]]
ActiveRecord::RecordInvalid: Validation failed: Password can't be blank
has_secure_password validations: false
# + your password validations
-----------------------
class User < ApplicationRecord
  has_secure_password
  validates :password, presence: true, confirmation: true
end
>> User.create(email: 'test@user.com', password: '123456');
>> User.first.update!(email: 'test@user.com')
  User Load (0.8ms)  SELECT "users".* FROM "users" ORDER BY "users"."id" ASC LIMIT $1  [["LIMIT", 1]]
ActiveRecord::RecordInvalid: Validation failed: Password can't be blank
has_secure_password validations: false
# + your password validations

How to fetch onChange from select value only when select ? is it possible without using useEfect?

copy iconCopydownload iconDownload
...
useEffect(() => {
  fetchData();
}, [genre]) 

const handleChange=(e)=>{
  setGenre(e.target.value)
}
const handleChange=(e)=>{
  setGenre(e.target.value)
  fetchData(e.target.value)
}
const fetchData = (selectedGenre) => {
  ...
    url: `https://jikan1.p.rapidapi.com/genre/anime/${selectedGenre}/1`,
  ...
-----------------------
...
useEffect(() => {
  fetchData();
}, [genre]) 

const handleChange=(e)=>{
  setGenre(e.target.value)
}
const handleChange=(e)=>{
  setGenre(e.target.value)
  fetchData(e.target.value)
}
const fetchData = (selectedGenre) => {
  ...
    url: `https://jikan1.p.rapidapi.com/genre/anime/${selectedGenre}/1`,
  ...
-----------------------
...
useEffect(() => {
  fetchData();
}, [genre]) 

const handleChange=(e)=>{
  setGenre(e.target.value)
}
const handleChange=(e)=>{
  setGenre(e.target.value)
  fetchData(e.target.value)
}
const fetchData = (selectedGenre) => {
  ...
    url: `https://jikan1.p.rapidapi.com/genre/anime/${selectedGenre}/1`,
  ...
-----------------------
function App() {
  const [list,setList]=useState([])
  const [genre,setGenre]=useState(0)
  const [selectCount, setSelectCount]=useState(0)

  const fetchData=async()=>{
    const options = {
      method: 'GET',
      url: `https://jikan1.p.rapidapi.com/genre/anime/${genre}/1`,
      headers: {
        'x-rapidapi-host': 'jikan1.p.rapidapi.com',
        'x-rapidapi-key': '*******************************'
      }
    };
    
    axios.request(options).then(function (response) {
      console.log(response.data.anime);
      setList(response.data.anime)
    }).catch(function (error) {
      console.error(error);
    });
  }

  const handleChange=(e)=>{
    setSelectCount(selectCount + 1)
    setGenre(e.target.value)
  }

  useEffect(() => {
    if (selectCount === 0) return
    fetchData()
  }, [genre])
  
  return ...Your JSX goes here...
}

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

How to stop a parent's onAnimationEnd from running when a Child run an animation

copy iconCopydownload iconDownload
 onAnimationEnd={(event) => {
          console.log("Child Ended Animation");
          event.stopPropagation();
        }}

Replacing element in html/css

copy iconCopydownload iconDownload
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet">
    <!-- <link rel="stylesheet" href="./button.css"> -->
    <title>Button</title>
</head>
<body>
    <!-- start contact section -->
    <style>
        /* border-box to simplify margin/padding issues */
* {
    box-sizing: border-box;
}

/* new btn styling */

.fancy-btn-wrapper {
    background: #1D1F2000;
}

main {
    height: 100vh;
    width: 100vw;
    background: #1D1F2000;

    transform: scale(.45) translate(-42%, 95%); /**/
}

.button {
    background: #2B2D2F;
    height: 80px;
    width: 200px;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 4px;

}

.text {
    font: bold 1.25rem/1 poppins;
    color: #71DFBE;
    position: absolute;
    top: 50%;
    transform: translateY(-52%);
    left: 0;
    right: 0;
}

.progress-bar {
    position: absolute;
    height: 20px;
    width: 0;
    right: 0;
    top: 50%;
    left: 50%;
    border-radius: 200px;
    transform: translateY(-50%) translateX(-50%);
    background: lighten(#2B2D2F, 15%);
}

svg {
    width: 30px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    left: 50%;
    right: 0;
}

.check {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}




/* Contact Form */

#contact {
    position: absolute;
    opacity: 1;
    z-index: 0;
}

input[type=text],
[type=email],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #555;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #0563bb;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type="text"]:focus,
input[type="email"]:focus,
#subject:focus {
  background: var(--bgFormElsFocus);
  transform: scale(1.02);
  transition: transform 0.2s ease-in-out;
}

input[type=submit]:hover {
  opacity: 0.9;
}

.contactform {
  position: relative;
  border-radius: 50px;
  background-color: #f2f2f2;
  padding: 5px;
  z-index: 2;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: 1%;
  width: 100%;
  animation-name: gradient;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.contactform:hover {
  animation-name: gradient;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

.column {
  float: center;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column,
  input[type=submit] {
    width: auto;
    margin-top: 0;
  }
}

.shakingErr {
  border-color: red;
  animation: shake 0.82s forwards;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

.form-submit-btn {
    opacity: 0;
}
    </style>

    <section id="contact">
        <div class="container" data-aos="fade-up">
        <div class="contactform">
            <div style="text-align:center">
            <div class="section-title">
                <h2><br/>Get In Touch</h2>
            </div>
            <p>Feel Free To Reach Out To Me Through This Form! </p>
            </div>
            <div class="row">
            <div class="column">
                <form name="myform" class="myform" action="none" id="my-form" method="POST" novalidate></form>
                <label for="firstname">First Name</label>
                <input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
                <label for="lastname">Last Name</label>
                <input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" placeholder="Your Email.." required>
                <label for="subject">Subject</label>
                <textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
                <input class="form-submit-btn" type="submit" value="Submit">
                </form>
            </div>
            </div>
        </div>
        </div>
    </section>

    <div class="fancy-btn-wrapper">
        <main>
            <div class="button">
                <div class="text">Submit</div>
            </div>
            <div class="progress-bar"></div>
            <svg x="0px" y="0px"
                viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
                <path class="check" class="st0" d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2"/>
            </svg>
        </main>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
    
    var basicTimeline = anime.timeline({
        autoplay: false
      });
      
      var pathEls = $(".check");
      for (var i = 0; i < pathEls.length; i++) {
        var pathEl = pathEls[i];
        var offset = anime.setDashoffset(pathEl);
        pathEl.setAttribute("stroke-dashoffset", offset);
      }
      
      basicTimeline
        .add({
          targets: ".text",
          duration: 1,
          opacity: "0"
        })
        .add({
          targets: ".button",
          duration: 1300,
          height: 20,
          width: 300,
          backgroundColor: "#2B2D2F",
          border: "0",
          borderRadius: 100
        })
        .add({
          targets: ".progress-bar",
          duration: 2000,
          width: 300,
          easing: "linear"
        })
        .add({
          targets: ".button",
          width: 0,
          duration: 1
        })
        .add({
          targets: ".progress-bar",
          width: 80,
          height: 80,
          delay: 500,
          duration: 750,
          borderRadius: 80,
          backgroundColor: "#71DFBE"
        })
        .add({
          targets: pathEl,
          strokeDashoffset: [offset, 0],
          duration: 200,
          easing: "easeInOutSine"
        });
    
    let contactForm = document.getElementById('contact');
    let animatedButton = document.querySelector('main');
    let form = document.querySelector('.myform');
    let formSubmit = document.querySelector('.form-submit-btn');
    
    let newButton = document.querySelector('.button');
    
    
    function buttonCenter() {
        contactForm.style.transition = 'opacity .5s ease-out';
        contactForm.style.opacity = '0';
    
        animatedButton.style.transition = 'transform 1s ease, background-color 1s ease';
        animatedButton.style.transform = 'translate(0%, 0%) scale(1)';
        animatedButton.style.backgroundColor = '#1D1F20'
    }
    
    function submitForm() {
        formSubmit.submit();
    }
    
    function newButtonPressFunction() {
    
        basicTimeline.play();
    
        buttonCenter();
    
        setTimeout(() => {
            setAttribute("action","https://formspree.io/f/xrgjbqpq");
            submitForm();
        },7000)
    }
    
    newButton.addEventListener('click', function(){
        newButtonPressFunction();
    })
    
    
      $(".button").click(function() {
        basicTimeline.play();
      });
      
      $(".text").click(function() {
        basicTimeline.play();
      });
    
      $(".progress-bar").click(function() {
        basicTimeline.play();
      });
      </script>
</body>
</html>
-----------------------
var basicTimeline = anime.timeline({
  autoplay: false,
});

var pathEls = $(".check");
for (var i = 0; i < pathEls.length; i++) {
  var pathEl = pathEls[i];
  var offset = anime.setDashoffset(pathEl);
  pathEl.setAttribute("stroke-dashoffset", offset);
}

basicTimeline
  .add({
    targets: ".text",
    duration: 1,
    opacity: "0"
  })
  .add({
    targets: ".button",
    duration: 1300,
    height: 20,
    width: 81,
    backgroundColor: "#717F7E",
    border: "0",
    zIndex: 0,
    borderRadius: 100
  })
  .add({
    targets: ".progress-bar",
    duration: 2000,
    width: 81,
    easing: "linear"
  })
  .add({
    targets: ".button",
    width: 0,
    duration: 1
  })
  .add({
    targets: ".progress-bar",
    width: 40,
    height: 39,
    delay: 500,
    duration: 750,
    borderRadius: 80,
    backgroundColor: "#71DFBE"
  })
  .add({
    targets: pathEl,
    strokeDashoffset: [offset, 0],
    duration: 200,
    easing: "easeInOutSine",
    complete: () =>
      setTimeout(() => $('#my-form').submit(), 100)
  });


$(".button").click(playButtonAnim);

$(".text").click(playButtonAnim);

function playButtonAnim() {
  basicTimeline.play();
}
/* Contact Form */

input[type=text],
[type=email],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #555;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #0563bb;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type="text"]:focus,
input[type="email"]:focus,
#subject:focus {
  background: var(--bgFormElsFocus);
  transform: scale(1.02);
  transition: transform 0.2s ease-in-out;
}

input[type=submit]:hover {
  opacity: 0.9;
}

.contactform {
  position: relative;
  border-radius: 50px;
  background-color: #f2f2f2;
  padding: 5px;
  z-index: 2;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: 1%;
  width: 100%;
  animation-name: gradient;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.contactform:hover {
  animation-name: gradient;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

.column {
  float: center;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column,
  input[type=submit] {
    width: auto;
    margin-top: 0;
  }
}

.shakingErr {
  border-color: red;
  animation: shake 0.82s forwards;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}


/* fancy button styles */

.buttonWrapper {
  height: 39px;
  width: 81px;
  position: relative;
}

.button {
  background: #2B2D2F;
  height: 39px;
  width: 81px;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  cursor: pointer;
  border-radius: 4px;
  z-index: 10;
}

.text {
  font: .8rem/1 poppins;
  color: #71DFBE;
  position: absolute;
  top: 50%;
  transform: translateY(-52%);
  left: 0;
  right: 0;
  cursor: pointer;
}

.progress-bar {
  position: absolute;
  height: 20px;
  width: 0;
  left: 40px;
  top: 50%;
  border-radius: 200px;
  transform: translateY(-50%) translateX(-50%);
  background: black;
}

svg {
  width: 15px;
  position: absolute;
  top: 50%;
  left: 40px;
  transform: translateY(-50%) translateX(-8px);
}

.check {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
<link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- start contact section -->
<section id="contact">
  <div class="container" data-aos="fade-up">
    <div class="contactform">
      <div style="text-align:center">
        <div class="section-title">
          <h2><br />Get In Touch</h2>
        </div>
        <p>Feel Free To Reach Out To Me Through This Form! </p>
      </div>
      <div class="row">
        <div class="column">
          <form name="myform" action="https://formspree.io/f/xrg123232jbqpq" id="my-form" method="POST" novalidate>
            <label for="firstname">First Name</label>
            <input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
            <label for="lastname">Last Name</label>
            <input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" placeholder="Your Email.." required>
            <label for="subject">Subject</label>
            <textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
            <!-- input type="submit" value="Submit" -->
            <input type="submit" value="Submit">
            <div class='buttonWrapper'>
              <div class="button">
                <div class="text">Submit</div>
              </div>
              <div class="progress-bar"></div>
              <svg x="0px" y="0px" viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
                  <path class="check" class="st0" d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2" />
                </svg>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>
  .add({
    targets: pathEl,
    ...
    complete: () =>
      setTimeout(() => $('#my-form').submit(), 100)
  });
-----------------------
var basicTimeline = anime.timeline({
  autoplay: false,
});

var pathEls = $(".check");
for (var i = 0; i < pathEls.length; i++) {
  var pathEl = pathEls[i];
  var offset = anime.setDashoffset(pathEl);
  pathEl.setAttribute("stroke-dashoffset", offset);
}

basicTimeline
  .add({
    targets: ".text",
    duration: 1,
    opacity: "0"
  })
  .add({
    targets: ".button",
    duration: 1300,
    height: 20,
    width: 81,
    backgroundColor: "#717F7E",
    border: "0",
    zIndex: 0,
    borderRadius: 100
  })
  .add({
    targets: ".progress-bar",
    duration: 2000,
    width: 81,
    easing: "linear"
  })
  .add({
    targets: ".button",
    width: 0,
    duration: 1
  })
  .add({
    targets: ".progress-bar",
    width: 40,
    height: 39,
    delay: 500,
    duration: 750,
    borderRadius: 80,
    backgroundColor: "#71DFBE"
  })
  .add({
    targets: pathEl,
    strokeDashoffset: [offset, 0],
    duration: 200,
    easing: "easeInOutSine",
    complete: () =>
      setTimeout(() => $('#my-form').submit(), 100)
  });


$(".button").click(playButtonAnim);

$(".text").click(playButtonAnim);

function playButtonAnim() {
  basicTimeline.play();
}
/* Contact Form */

input[type=text],
[type=email],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #555;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #0563bb;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type="text"]:focus,
input[type="email"]:focus,
#subject:focus {
  background: var(--bgFormElsFocus);
  transform: scale(1.02);
  transition: transform 0.2s ease-in-out;
}

input[type=submit]:hover {
  opacity: 0.9;
}

.contactform {
  position: relative;
  border-radius: 50px;
  background-color: #f2f2f2;
  padding: 5px;
  z-index: 2;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: 1%;
  width: 100%;
  animation-name: gradient;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.contactform:hover {
  animation-name: gradient;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

.column {
  float: center;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column,
  input[type=submit] {
    width: auto;
    margin-top: 0;
  }
}

.shakingErr {
  border-color: red;
  animation: shake 0.82s forwards;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}


/* fancy button styles */

.buttonWrapper {
  height: 39px;
  width: 81px;
  position: relative;
}

.button {
  background: #2B2D2F;
  height: 39px;
  width: 81px;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  cursor: pointer;
  border-radius: 4px;
  z-index: 10;
}

.text {
  font: .8rem/1 poppins;
  color: #71DFBE;
  position: absolute;
  top: 50%;
  transform: translateY(-52%);
  left: 0;
  right: 0;
  cursor: pointer;
}

.progress-bar {
  position: absolute;
  height: 20px;
  width: 0;
  left: 40px;
  top: 50%;
  border-radius: 200px;
  transform: translateY(-50%) translateX(-50%);
  background: black;
}

svg {
  width: 15px;
  position: absolute;
  top: 50%;
  left: 40px;
  transform: translateY(-50%) translateX(-8px);
}

.check {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
<link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- start contact section -->
<section id="contact">
  <div class="container" data-aos="fade-up">
    <div class="contactform">
      <div style="text-align:center">
        <div class="section-title">
          <h2><br />Get In Touch</h2>
        </div>
        <p>Feel Free To Reach Out To Me Through This Form! </p>
      </div>
      <div class="row">
        <div class="column">
          <form name="myform" action="https://formspree.io/f/xrg123232jbqpq" id="my-form" method="POST" novalidate>
            <label for="firstname">First Name</label>
            <input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
            <label for="lastname">Last Name</label>
            <input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" placeholder="Your Email.." required>
            <label for="subject">Subject</label>
            <textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
            <!-- input type="submit" value="Submit" -->
            <input type="submit" value="Submit">
            <div class='buttonWrapper'>
              <div class="button">
                <div class="text">Submit</div>
              </div>
              <div class="progress-bar"></div>
              <svg x="0px" y="0px" viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
                  <path class="check" class="st0" d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2" />
                </svg>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>
  .add({
    targets: pathEl,
    ...
    complete: () =>
      setTimeout(() => $('#my-form').submit(), 100)
  });
-----------------------
var basicTimeline = anime.timeline({
  autoplay: false,
});

var pathEls = $(".check");
for (var i = 0; i < pathEls.length; i++) {
  var pathEl = pathEls[i];
  var offset = anime.setDashoffset(pathEl);
  pathEl.setAttribute("stroke-dashoffset", offset);
}

basicTimeline
  .add({
    targets: ".text",
    duration: 1,
    opacity: "0"
  })
  .add({
    targets: ".button",
    duration: 1300,
    height: 20,
    width: 81,
    backgroundColor: "#717F7E",
    border: "0",
    zIndex: 0,
    borderRadius: 100
  })
  .add({
    targets: ".progress-bar",
    duration: 2000,
    width: 81,
    easing: "linear"
  })
  .add({
    targets: ".button",
    width: 0,
    duration: 1
  })
  .add({
    targets: ".progress-bar",
    width: 40,
    height: 39,
    delay: 500,
    duration: 750,
    borderRadius: 80,
    backgroundColor: "#71DFBE"
  })
  .add({
    targets: pathEl,
    strokeDashoffset: [offset, 0],
    duration: 200,
    easing: "easeInOutSine",
    complete: () =>
      setTimeout(() => $('#my-form').submit(), 100)
  });


$(".button").click(playButtonAnim);

$(".text").click(playButtonAnim);

function playButtonAnim() {
  basicTimeline.play();
}
/* Contact Form */

input[type=text],
[type=email],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #555;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #0563bb;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type="text"]:focus,
input[type="email"]:focus,
#subject:focus {
  background: var(--bgFormElsFocus);
  transform: scale(1.02);
  transition: transform 0.2s ease-in-out;
}

input[type=submit]:hover {
  opacity: 0.9;
}

.contactform {
  position: relative;
  border-radius: 50px;
  background-color: #f2f2f2;
  padding: 5px;
  z-index: 2;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: 1%;
  width: 100%;
  animation-name: gradient;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.contactform:hover {
  animation-name: gradient;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

.column {
  float: center;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column,
  input[type=submit] {
    width: auto;
    margin-top: 0;
  }
}

.shakingErr {
  border-color: red;
  animation: shake 0.82s forwards;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}


/* fancy button styles */

.buttonWrapper {
  height: 39px;
  width: 81px;
  position: relative;
}

.button {
  background: #2B2D2F;
  height: 39px;
  width: 81px;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  cursor: pointer;
  border-radius: 4px;
  z-index: 10;
}

.text {
  font: .8rem/1 poppins;
  color: #71DFBE;
  position: absolute;
  top: 50%;
  transform: translateY(-52%);
  left: 0;
  right: 0;
  cursor: pointer;
}

.progress-bar {
  position: absolute;
  height: 20px;
  width: 0;
  left: 40px;
  top: 50%;
  border-radius: 200px;
  transform: translateY(-50%) translateX(-50%);
  background: black;
}

svg {
  width: 15px;
  position: absolute;
  top: 50%;
  left: 40px;
  transform: translateY(-50%) translateX(-8px);
}

.check {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
<link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- start contact section -->
<section id="contact">
  <div class="container" data-aos="fade-up">
    <div class="contactform">
      <div style="text-align:center">
        <div class="section-title">
          <h2><br />Get In Touch</h2>
        </div>
        <p>Feel Free To Reach Out To Me Through This Form! </p>
      </div>
      <div class="row">
        <div class="column">
          <form name="myform" action="https://formspree.io/f/xrg123232jbqpq" id="my-form" method="POST" novalidate>
            <label for="firstname">First Name</label>
            <input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
            <label for="lastname">Last Name</label>
            <input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" placeholder="Your Email.." required>
            <label for="subject">Subject</label>
            <textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
            <!-- input type="submit" value="Submit" -->
            <input type="submit" value="Submit">
            <div class='buttonWrapper'>
              <div class="button">
                <div class="text">Submit</div>
              </div>
              <div class="progress-bar"></div>
              <svg x="0px" y="0px" viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
                  <path class="check" class="st0" d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2" />
                </svg>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>
  .add({
    targets: pathEl,
    ...
    complete: () =>
      setTimeout(() => $('#my-form').submit(), 100)
  });
-----------------------
var basicTimeline = anime.timeline({
  autoplay: false,
});

var pathEls = $(".check");
for (var i = 0; i < pathEls.length; i++) {
  var pathEl = pathEls[i];
  var offset = anime.setDashoffset(pathEl);
  pathEl.setAttribute("stroke-dashoffset", offset);
}

basicTimeline
  .add({
    targets: ".text",
    duration: 1,
    opacity: "0"
  })
  .add({
    targets: ".button",
    duration: 1300,
    height: 20,
    width: 81,
    backgroundColor: "#717F7E",
    border: "0",
    zIndex: 0,
    borderRadius: 100
  })
  .add({
    targets: ".progress-bar",
    duration: 2000,
    width: 81,
    easing: "linear"
  })
  .add({
    targets: ".button",
    width: 0,
    duration: 1
  })
  .add({
    targets: ".progress-bar",
    width: 40,
    height: 39,
    delay: 500,
    duration: 750,
    borderRadius: 80,
    backgroundColor: "#71DFBE"
  })
  .add({
    targets: pathEl,
    strokeDashoffset: [offset, 0],
    duration: 200,
    easing: "easeInOutSine",
    complete: () =>
      setTimeout(() => $('#my-form').submit(), 100)
  });


$(".button").click(playButtonAnim);

$(".text").click(playButtonAnim);

function playButtonAnim() {
  basicTimeline.play();
}
/* Contact Form */

input[type=text],
[type=email],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #555;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #0563bb;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type="text"]:focus,
input[type="email"]:focus,
#subject:focus {
  background: var(--bgFormElsFocus);
  transform: scale(1.02);
  transition: transform 0.2s ease-in-out;
}

input[type=submit]:hover {
  opacity: 0.9;
}

.contactform {
  position: relative;
  border-radius: 50px;
  background-color: #f2f2f2;
  padding: 5px;
  z-index: 2;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: 1%;
  width: 100%;
  animation-name: gradient;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.contactform:hover {
  animation-name: gradient;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

.column {
  float: center;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column,
  input[type=submit] {
    width: auto;
    margin-top: 0;
  }
}

.shakingErr {
  border-color: red;
  animation: shake 0.82s forwards;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}


/* fancy button styles */

.buttonWrapper {
  height: 39px;
  width: 81px;
  position: relative;
}

.button {
  background: #2B2D2F;
  height: 39px;
  width: 81px;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  cursor: pointer;
  border-radius: 4px;
  z-index: 10;
}

.text {
  font: .8rem/1 poppins;
  color: #71DFBE;
  position: absolute;
  top: 50%;
  transform: translateY(-52%);
  left: 0;
  right: 0;
  cursor: pointer;
}

.progress-bar {
  position: absolute;
  height: 20px;
  width: 0;
  left: 40px;
  top: 50%;
  border-radius: 200px;
  transform: translateY(-50%) translateX(-50%);
  background: black;
}

svg {
  width: 15px;
  position: absolute;
  top: 50%;
  left: 40px;
  transform: translateY(-50%) translateX(-8px);
}

.check {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
<link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- start contact section -->
<section id="contact">
  <div class="container" data-aos="fade-up">
    <div class="contactform">
      <div style="text-align:center">
        <div class="section-title">
          <h2><br />Get In Touch</h2>
        </div>
        <p>Feel Free To Reach Out To Me Through This Form! </p>
      </div>
      <div class="row">
        <div class="column">
          <form name="myform" action="https://formspree.io/f/xrg123232jbqpq" id="my-form" method="POST" novalidate>
            <label for="firstname">First Name</label>
            <input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
            <label for="lastname">Last Name</label>
            <input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" placeholder="Your Email.." required>
            <label for="subject">Subject</label>
            <textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
            <!-- input type="submit" value="Submit" -->
            <input type="submit" value="Submit">
            <div class='buttonWrapper'>
              <div class="button">
                <div class="text">Submit</div>
              </div>
              <div class="progress-bar"></div>
              <svg x="0px" y="0px" viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
                  <path class="check" class="st0" d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2" />
                </svg>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>
  .add({
    targets: pathEl,
    ...
    complete: () =>
      setTimeout(() => $('#my-form').submit(), 100)
  });

How can I stop duplicate array in my React - using infinite scroll?

copy iconCopydownload iconDownload
const newPage = page + 1
setPage(newPage)
const scrollThreshold = () => {
    const newPage = page + 1
    setPage(newPage)
}
const PAGE_NUMBER = 1
<InfiniteScroll>
...
next={getList}
...
</InfiniteScroll> 
<InfiniteScroll>
...
next={getList && scrollThreshold}
...
</InfiniteScroll> 
-----------------------
const newPage = page + 1
setPage(newPage)
const scrollThreshold = () => {
    const newPage = page + 1
    setPage(newPage)
}
const PAGE_NUMBER = 1
<InfiniteScroll>
...
next={getList}
...
</InfiniteScroll> 
<InfiniteScroll>
...
next={getList && scrollThreshold}
...
</InfiniteScroll> 
-----------------------
const newPage = page + 1
setPage(newPage)
const scrollThreshold = () => {
    const newPage = page + 1
    setPage(newPage)
}
const PAGE_NUMBER = 1
<InfiniteScroll>
...
next={getList}
...
</InfiniteScroll> 
<InfiniteScroll>
...
next={getList && scrollThreshold}
...
</InfiniteScroll> 
-----------------------
const newPage = page + 1
setPage(newPage)
const scrollThreshold = () => {
    const newPage = page + 1
    setPage(newPage)
}
const PAGE_NUMBER = 1
<InfiniteScroll>
...
next={getList}
...
</InfiniteScroll> 
<InfiniteScroll>
...
next={getList && scrollThreshold}
...
</InfiniteScroll> 
-----------------------
const newPage = page + 1
setPage(newPage)
const scrollThreshold = () => {
    const newPage = page + 1
    setPage(newPage)
}
const PAGE_NUMBER = 1
<InfiniteScroll>
...
next={getList}
...
</InfiniteScroll> 
<InfiniteScroll>
...
next={getList && scrollThreshold}
...
</InfiniteScroll> 

Button Animation in HTML/CSS

copy iconCopydownload iconDownload
var basicTimeline = anime.timeline({
  autoplay: false,
});

var pathEls = $(".check");
for (var i = 0; i < pathEls.length; i++) {
  var pathEl = pathEls[i];
  var offset = anime.setDashoffset(pathEl);
  pathEl.setAttribute("stroke-dashoffset", offset);
}

basicTimeline
  .add({
    targets: ".text",
    duration: 1,
    opacity: "0"
  })
  .add({
    targets: ".button",
    duration: 100,
    backgroundColor: "#D3D3D3", // Change the color here.
  })
  .add({
    targets: ".button",
    duration: 1200,
    height: 20,
    width: 200,
    //backgroundColor: "#D3D3D3", // Not here!
    border: "0",
    borderRadius: 100
  })
  .add({
    targets: ".progress-bar",
    duration: 2000,
    width: 200,
    easing: "linear"
  })
  .add({
    targets: ".button",
    width: 0,
    duration: 1
  })
  .add({
    targets: ".progress-bar",
    width: 50,
    height: 50,
    delay: 500,
    duration: 750,
    borderRadius: 80,
    backgroundColor: "#0563bb",
    left: 26  // Added to position at the left, aligned with the rest
  })
  .add({
    targets: pathEl,
    strokeDashoffset: [offset, 0],
    duration: 200,
    easing: "easeInOutSine",
    //complete: () =>
      //setTimeout(() => $('#my-form').submit(), 100) // Commented just to see the result longer...
  });


$(".button").click(playButtonAnim);

$(".text").click(playButtonAnim);

function playButtonAnim() {
  basicTimeline.play();
}
/* Contact Form */

input[type=text],
[type=email],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #555;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #0563bb;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type="text"]:focus,
input[type="email"]:focus,
#subject:focus {
  background: var(--bgFormElsFocus);
  transform: scale(1.02);
  transition: transform 0.2s ease-in-out;
}

input[type=submit]:hover {
  opacity: 0.9;
}

.contactform {
  position: relative;
  border-radius: 50px;
  background-color: #f2f2f2;
  padding: 5px;
  z-index: 2;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: 1%;
  width: 100%;
  animation-name: gradient;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.contactform:hover {
  animation-name: gradient;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

.column {
  float: center;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column,
  input[type=submit] {
    width: auto;
    margin-top: 0;
  }
}

.shakingErr {
  border-color: red;
  animation: shake 0.82s forwards;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}


/* fancy button styles */

.buttonWrapper {
  height: 20px; /* For the button vertical alignement */
  width: 100%;
  position: relative;
  margin-top: 0.9em;  /* For the button vertical alignement */
}

.button {
  background: #0563bb;
  height: 40px;
  width: 90px;
  text-align: center;
  position: absolute;
  top: 25%;
  transform: translateY(-50%);
  left: 0;
  cursor: pointer;
  border-radius: 1px;
}

.text {
  font: .7rem;
  color: white;
  position: absolute;
  top: 50%;
  transform: translateY(-52%);
  left: 0;
  right: 0;
  cursor: pointer;
}

.progress-bar {
  position: absolute;
  height: 20px;
  width: 0;
  left: 100px;
  top: 25%;
  border-radius: 200px;
  transform: translateY(-50%) translateX(-50%);
  background: #0563bb;
}

svg {
  width: 20px;
  position: absolute;
  top: 25%;
  left: 26px; /* CHANGED - was 100px */
  transform: translateY(-50%) translateX(-50%);
}

.check {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js">
  </script>
  <!--/script-->
  <!--script src="http://code.jquery.com/jquery-1.11.3.min.js">
  </script-->
  <!--link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet"-->
  <!--script src="lib/jquery-1.11.3.min.js" type="application/javascript"></script-->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<body>
  <!-- start contact section -->
  <section id="contact">
    <div class="container" data-aos="fade-up">
      <div class="contactform">
        <div style="text-align:center">
          <div class="section-title">
            <h2>
              <br/>Get In Touch
            </h2>
          </div>
          <p>Feel Free To Reach Out To Me Through This Form! </p>
        </div>
        <div class="row">
          <div class="column">
            <form name="myform" action="#" id="my-form" method="POST" novalidate>
              <label for="firstname">First Name</label>
              <input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
              <label for="lastname">Last Name</label>
              <input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
              <label for="email">Email:</label>
              <input type="email" id="email" name="email" placeholder="Your Email.." required>
              <label for="subject">Subject</label>
              <textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
              <div class='buttonWrapper'>
                <div class="button">
                  <div class="text">Submit</div>
                </div>
                <div class="progress-bar"></div>
                <svg x="0px" y="0px" viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
                  <path class="check" class="st0" d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2" />
                </svg>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- End Contact Section -->
  <script src="script.js"></script>
</body>

</html>
-----------------------
var basicTimeline = anime.timeline({
  autoplay: false,
});

var pathEls = $(".check");
for (var i = 0; i < pathEls.length; i++) {
  var pathEl = pathEls[i];
  var offset = anime.setDashoffset(pathEl);
  pathEl.setAttribute("stroke-dashoffset", offset);
}

basicTimeline
  .add({
    targets: ".text",
    duration: 1,
    opacity: "0"
  })
  .add({
    targets: ".button",
    duration: 100,
    backgroundColor: "#D3D3D3", // Change the color here.
  })
  .add({
    targets: ".button",
    duration: 1200,
    height: 20,
    width: 200,
    //backgroundColor: "#D3D3D3", // Not here!
    border: "0",
    borderRadius: 100
  })
  .add({
    targets: ".progress-bar",
    duration: 2000,
    width: 200,
    easing: "linear"
  })
  .add({
    targets: ".button",
    width: 0,
    duration: 1
  })
  .add({
    targets: ".progress-bar",
    width: 50,
    height: 50,
    delay: 500,
    duration: 750,
    borderRadius: 80,
    backgroundColor: "#0563bb",
    left: 26  // Added to position at the left, aligned with the rest
  })
  .add({
    targets: pathEl,
    strokeDashoffset: [offset, 0],
    duration: 200,
    easing: "easeInOutSine",
    //complete: () =>
      //setTimeout(() => $('#my-form').submit(), 100) // Commented just to see the result longer...
  });


$(".button").click(playButtonAnim);

$(".text").click(playButtonAnim);

function playButtonAnim() {
  basicTimeline.play();
}
/* Contact Form */

input[type=text],
[type=email],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #555;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #0563bb;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type="text"]:focus,
input[type="email"]:focus,
#subject:focus {
  background: var(--bgFormElsFocus);
  transform: scale(1.02);
  transition: transform 0.2s ease-in-out;
}

input[type=submit]:hover {
  opacity: 0.9;
}

.contactform {
  position: relative;
  border-radius: 50px;
  background-color: #f2f2f2;
  padding: 5px;
  z-index: 2;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: 1%;
  width: 100%;
  animation-name: gradient;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.contactform:hover {
  animation-name: gradient;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

.column {
  float: center;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column,
  input[type=submit] {
    width: auto;
    margin-top: 0;
  }
}

.shakingErr {
  border-color: red;
  animation: shake 0.82s forwards;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}


/* fancy button styles */

.buttonWrapper {
  height: 20px; /* For the button vertical alignement */
  width: 100%;
  position: relative;
  margin-top: 0.9em;  /* For the button vertical alignement */
}

.button {
  background: #0563bb;
  height: 40px;
  width: 90px;
  text-align: center;
  position: absolute;
  top: 25%;
  transform: translateY(-50%);
  left: 0;
  cursor: pointer;
  border-radius: 1px;
}

.text {
  font: .7rem;
  color: white;
  position: absolute;
  top: 50%;
  transform: translateY(-52%);
  left: 0;
  right: 0;
  cursor: pointer;
}

.progress-bar {
  position: absolute;
  height: 20px;
  width: 0;
  left: 100px;
  top: 25%;
  border-radius: 200px;
  transform: translateY(-50%) translateX(-50%);
  background: #0563bb;
}

svg {
  width: 20px;
  position: absolute;
  top: 25%;
  left: 26px; /* CHANGED - was 100px */
  transform: translateY(-50%) translateX(-50%);
}

.check {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js">
  </script>
  <!--/script-->
  <!--script src="http://code.jquery.com/jquery-1.11.3.min.js">
  </script-->
  <!--link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet"-->
  <!--script src="lib/jquery-1.11.3.min.js" type="application/javascript"></script-->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<body>
  <!-- start contact section -->
  <section id="contact">
    <div class="container" data-aos="fade-up">
      <div class="contactform">
        <div style="text-align:center">
          <div class="section-title">
            <h2>
              <br/>Get In Touch
            </h2>
          </div>
          <p>Feel Free To Reach Out To Me Through This Form! </p>
        </div>
        <div class="row">
          <div class="column">
            <form name="myform" action="#" id="my-form" method="POST" novalidate>
              <label for="firstname">First Name</label>
              <input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
              <label for="lastname">Last Name</label>
              <input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
              <label for="email">Email:</label>
              <input type="email" id="email" name="email" placeholder="Your Email.." required>
              <label for="subject">Subject</label>
              <textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
              <div class='buttonWrapper'>
                <div class="button">
                  <div class="text">Submit</div>
                </div>
                <div class="progress-bar"></div>
                <svg x="0px" y="0px" viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
                  <path class="check" class="st0" d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2" />
                </svg>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- End Contact Section -->
  <script src="script.js"></script>
</body>

</html>
-----------------------
var basicTimeline = anime.timeline({
  autoplay: false,
});

var pathEls = $(".check");
for (var i = 0; i < pathEls.length; i++) {
  var pathEl = pathEls[i];
  var offset = anime.setDashoffset(pathEl);
  pathEl.setAttribute("stroke-dashoffset", offset);
}

basicTimeline
  .add({
    targets: ".text",
    duration: 1,
    opacity: "0"
  })
  .add({
    targets: ".button",
    duration: 100,
    backgroundColor: "#D3D3D3", // Change the color here.
  })
  .add({
    targets: ".button",
    duration: 1200,
    height: 20,
    width: 200,
    //backgroundColor: "#D3D3D3", // Not here!
    border: "0",
    borderRadius: 100
  })
  .add({
    targets: ".progress-bar",
    duration: 2000,
    width: 200,
    easing: "linear"
  })
  .add({
    targets: ".button",
    width: 0,
    duration: 1
  })
  .add({
    targets: ".progress-bar",
    width: 50,
    height: 50,
    delay: 500,
    duration: 750,
    borderRadius: 80,
    backgroundColor: "#0563bb",
    left: 26  // Added to position at the left, aligned with the rest
  })
  .add({
    targets: pathEl,
    strokeDashoffset: [offset, 0],
    duration: 200,
    easing: "easeInOutSine",
    //complete: () =>
      //setTimeout(() => $('#my-form').submit(), 100) // Commented just to see the result longer...
  });


$(".button").click(playButtonAnim);

$(".text").click(playButtonAnim);

function playButtonAnim() {
  basicTimeline.play();
}
/* Contact Form */

input[type=text],
[type=email],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #555;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #0563bb;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type="text"]:focus,
input[type="email"]:focus,
#subject:focus {
  background: var(--bgFormElsFocus);
  transform: scale(1.02);
  transition: transform 0.2s ease-in-out;
}

input[type=submit]:hover {
  opacity: 0.9;
}

.contactform {
  position: relative;
  border-radius: 50px;
  background-color: #f2f2f2;
  padding: 5px;
  z-index: 2;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: 1%;
  width: 100%;
  animation-name: gradient;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.contactform:hover {
  animation-name: gradient;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

.column {
  float: center;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column,
  input[type=submit] {
    width: auto;
    margin-top: 0;
  }
}

.shakingErr {
  border-color: red;
  animation: shake 0.82s forwards;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}


/* fancy button styles */

.buttonWrapper {
  height: 20px; /* For the button vertical alignement */
  width: 100%;
  position: relative;
  margin-top: 0.9em;  /* For the button vertical alignement */
}

.button {
  background: #0563bb;
  height: 40px;
  width: 90px;
  text-align: center;
  position: absolute;
  top: 25%;
  transform: translateY(-50%);
  left: 0;
  cursor: pointer;
  border-radius: 1px;
}

.text {
  font: .7rem;
  color: white;
  position: absolute;
  top: 50%;
  transform: translateY(-52%);
  left: 0;
  right: 0;
  cursor: pointer;
}

.progress-bar {
  position: absolute;
  height: 20px;
  width: 0;
  left: 100px;
  top: 25%;
  border-radius: 200px;
  transform: translateY(-50%) translateX(-50%);
  background: #0563bb;
}

svg {
  width: 20px;
  position: absolute;
  top: 25%;
  left: 26px; /* CHANGED - was 100px */
  transform: translateY(-50%) translateX(-50%);
}

.check {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js">
  </script>
  <!--/script-->
  <!--script src="http://code.jquery.com/jquery-1.11.3.min.js">
  </script-->
  <!--link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet"-->
  <!--script src="lib/jquery-1.11.3.min.js" type="application/javascript"></script-->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<body>
  <!-- start contact section -->
  <section id="contact">
    <div class="container" data-aos="fade-up">
      <div class="contactform">
        <div style="text-align:center">
          <div class="section-title">
            <h2>
              <br/>Get In Touch
            </h2>
          </div>
          <p>Feel Free To Reach Out To Me Through This Form! </p>
        </div>
        <div class="row">
          <div class="column">
            <form name="myform" action="#" id="my-form" method="POST" novalidate>
              <label for="firstname">First Name</label>
              <input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
              <label for="lastname">Last Name</label>
              <input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
              <label for="email">Email:</label>
              <input type="email" id="email" name="email" placeholder="Your Email.." required>
              <label for="subject">Subject</label>
              <textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
              <div class='buttonWrapper'>
                <div class="button">
                  <div class="text">Submit</div>
                </div>
                <div class="progress-bar"></div>
                <svg x="0px" y="0px" viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
                  <path class="check" class="st0" d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2" />
                </svg>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- End Contact Section -->
  <script src="script.js"></script>
</body>

</html>
-----------------------
var basicTimeline = anime.timeline({
  autoplay: false,
});

var pathEls = $(".check");
for (var i = 0; i < pathEls.length; i++) {
  var pathEl = pathEls[i];
  var offset = anime.setDashoffset(pathEl);
  pathEl.setAttribute("stroke-dashoffset", offset);
}

basicTimeline
  .add({
    targets: ".text",
    duration: 1,
    opacity: "0"
  })
  .add({
    targets: ".button",
    duration: 1,
    background: "#FFFFFF",
  })
  .add({
    targets: ".button",
    duration: 600,
    height: 20,
    width: 200,
    border: "0",
    background: "#D3D3D3",
    borderRadius: 100
  })
  .add({
    targets: ".progress-bar",
    duration: 2000,
    width: 200,
    easing: "linear"
  })
  .add({
    targets: ".button",
    width: 50,
    height: 50,
    delay: 500,
    duration: 750,
    borderRadius: 80,
    backgroundColor: "#0563bb"
  })
  .add({
    targets: pathEl,
    strokeDashoffset: [offset, 0],
    duration: 200,
    easing: "easeInOutSine",
    complete: () =>
      setTimeout(() => $('#my-form').submit(), 100)
  });


$(".button").click(playButtonAnim);

$(".text").click(playButtonAnim);

function playButtonAnim() {
  basicTimeline.play();
}
/* fancy button styles */

.buttonWrapper {
  height: 80px;
  width: 100%;
  position: relative;
}

.button {
  background: #0563bb;
  height: 40px;
  width: 90px;
  text-align: center;
  position: relative;
  cursor: pointer;
  border-radius: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden
}

.text {
  font: .7rem;
  color: white;
  position: absolute;
  left: 0;
  right: 0;
  cursor: pointer;
}

.progress-bar {
  position:absolute;
  height: 20px;
  width: 0;
  border-radius: 200px;
  background: #0563bb;
  top: 0;
  left: 0;
}

svg {
  position: relative;
  width: 20px;
  margin: 0 auto;
  display: block;
}

.check {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js">
</script>

<section id="contact">
  <div class="container" data-aos="fade-up">
    <div class="contactform">
      <div class="row">
        <div class="column">
          <form name="myform" action="#" id="my-form" method="POST" novalidate>
            <div class='buttonWrapper'>
              <div class="button">
                <div class="text">Submit</div>
              <div class="progress-bar"></div>
                          <svg x="0px" y="0px" viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
                  <path class="check" class="st0" d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2" />
                </svg>
                            </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>
-----------------------
var basicTimeline = anime.timeline({
  autoplay: false,
});

var pathEls = $(".check");
for (var i = 0; i < pathEls.length; i++) {
  var pathEl = pathEls[i];
  var offset = anime.setDashoffset(pathEl);
  pathEl.setAttribute("stroke-dashoffset", offset);
}

basicTimeline
  .add({
    targets: ".text",
    duration: 1,
    opacity: "0"
  })
  .add({
    targets: ".button",
    duration: 1,
    background: "#FFFFFF",
  })
  .add({
    targets: ".button",
    duration: 600,
    height: 20,
    width: 200,
    border: "0",
    background: "#D3D3D3",
    borderRadius: 100
  })
  .add({
    targets: ".progress-bar",
    duration: 2000,
    width: 200,
    easing: "linear"
  })
  .add({
    targets: ".button",
    width: 50,
    height: 50,
    delay: 500,
    duration: 750,
    borderRadius: 80,
    backgroundColor: "#0563bb"
  })
  .add({
    targets: pathEl,
    strokeDashoffset: [offset, 0],
    duration: 200,
    easing: "easeInOutSine",
    complete: () =>
      setTimeout(() => $('#my-form').submit(), 100)
  });


$(".button").click(playButtonAnim);

$(".text").click(playButtonAnim);

function playButtonAnim() {
  basicTimeline.play();
}
/* fancy button styles */

.buttonWrapper {
  height: 80px;
  width: 100%;
  position: relative;
}

.button {
  background: #0563bb;
  height: 40px;
  width: 90px;
  text-align: center;
  position: relative;
  cursor: pointer;
  border-radius: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden
}

.text {
  font: .7rem;
  color: white;
  position: absolute;
  left: 0;
  right: 0;
  cursor: pointer;
}

.progress-bar {
  position:absolute;
  height: 20px;
  width: 0;
  border-radius: 200px;
  background: #0563bb;
  top: 0;
  left: 0;
}

svg {
  position: relative;
  width: 20px;
  margin: 0 auto;
  display: block;
}

.check {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js">
</script>

<section id="contact">
  <div class="container" data-aos="fade-up">
    <div class="contactform">
      <div class="row">
        <div class="column">
          <form name="myform" action="#" id="my-form" method="POST" novalidate>
            <div class='buttonWrapper'>
              <div class="button">
                <div class="text">Submit</div>
              <div class="progress-bar"></div>
                          <svg x="0px" y="0px" viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
                  <path class="check" class="st0" d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2" />
                </svg>
                            </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>
-----------------------
var basicTimeline = anime.timeline({
  autoplay: false,
});

var pathEls = $(".check");
for (var i = 0; i < pathEls.length; i++) {
  var pathEl = pathEls[i];
  var offset = anime.setDashoffset(pathEl);
  pathEl.setAttribute("stroke-dashoffset", offset);
}

basicTimeline
  .add({
    targets: ".text",
    duration: 1,
    opacity: "0"
  })
  .add({
    targets: ".button",
    duration: 1,
    background: "#FFFFFF",
  })
  .add({
    targets: ".button",
    duration: 600,
    height: 20,
    width: 200,
    border: "0",
    background: "#D3D3D3",
    borderRadius: 100
  })
  .add({
    targets: ".progress-bar",
    duration: 2000,
    width: 200,
    easing: "linear"
  })
  .add({
    targets: ".button",
    width: 50,
    height: 50,
    delay: 500,
    duration: 750,
    borderRadius: 80,
    backgroundColor: "#0563bb"
  })
  .add({
    targets: pathEl,
    strokeDashoffset: [offset, 0],
    duration: 200,
    easing: "easeInOutSine",
    complete: () =>
      setTimeout(() => $('#my-form').submit(), 100)
  });


$(".button").click(playButtonAnim);

$(".text").click(playButtonAnim);

function playButtonAnim() {
  basicTimeline.play();
}
/* fancy button styles */

.buttonWrapper {
  height: 80px;
  width: 100%;
  position: relative;
}

.button {
  background: #0563bb;
  height: 40px;
  width: 90px;
  text-align: center;
  position: relative;
  cursor: pointer;
  border-radius: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden
}

.text {
  font: .7rem;
  color: white;
  position: absolute;
  left: 0;
  right: 0;
  cursor: pointer;
}

.progress-bar {
  position:absolute;
  height: 20px;
  width: 0;
  border-radius: 200px;
  background: #0563bb;
  top: 0;
  left: 0;
}

svg {
  position: relative;
  width: 20px;
  margin: 0 auto;
  display: block;
}

.check {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js">
</script>

<section id="contact">
  <div class="container" data-aos="fade-up">
    <div class="contactform">
      <div class="row">
        <div class="column">
          <form name="myform" action="#" id="my-form" method="POST" novalidate>
            <div class='buttonWrapper'>
              <div class="button">
                <div class="text">Submit</div>
              <div class="progress-bar"></div>
                          <svg x="0px" y="0px" viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
                  <path class="check" class="st0" d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2" />
                </svg>
                            </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

plotly,python, plot histogram over other subplot?

copy iconCopydownload iconDownload
import plotly.graph_objects as go
from plotly.subplots import make_subplots
import pandas as pd
import numpy as np
import yfinance as yf

df = yf.download("AAPL", start="2021-01-01", end="2021-12-01")
df.reset_index(inplace=True)
df.columns = ['date', 'open', 'high', 'low', 'close', 'adj close', 'volume']
df['ma'] = df['close'].rolling(25).mean()
df['sigma'] = df['close'].rolling(25).std()
df['bb_high'] = df['ma'] + df['sigma'] * 2
df['bb_low'] = df['ma'] - df['sigma'] * 2

fig = make_subplots(rows=3, cols=1, 
                    vertical_spacing=0.025, 
                    row_heights=[0.6,0.20,0.20],
                    shared_xaxes=False,
                    specs=[[{"secondary_y": True}],[{"secondary_y": False}],[{"secondary_y": False}]])

fig.add_trace(
    go.Histogram(
        x=df.volume,
        y=df.close,
        orientation='h',
        name='vol hist',
        nbinsx=len(df.volume),
        nbinsy=len(df.close),
        hovertemplate=[],
        opacity=0.4,
        marker={
            'color':'steelblue'
        },
), secondary_y=True)

fig.add_trace(
    go.Candlestick(
        x=df.date,
        open=df.open,
        high=df.high,
        low=df.low,
        close=df.close,
        name='Candles',
        increasing_line_color='#0ebc6e', 
        decreasing_line_color='#e8482c',
        line={'width': 1},
        hoverlabel={
            'font':{
                'color':'white',
                'family':'Open Sans',
                'size':15
            }
        },
), secondary_y=True)

fig.add_trace(
    go.Scatter(
        x=df.date, 
        y=df.bb_high,
        name='bollinger_high',
        line={'color':'orange','width':1},
        hovertemplate=[],
), secondary_y=False)

fig.add_trace(
    go.Scatter(
        x=df.date,
        y=df.bb_low,
        name='bollinger_low',
        line={'color':'orange','width':1},
        hovertemplate=[],
), secondary_y=False)

fig.add_trace(
    go.Bar(
        x=df.date,
        y=df.volume,
        name='Volume',
        marker_color='steelblue',
), secondary_y=False, row=2, col=1)

fig.add_trace(
    go.Scatter(
        x=df.date,
        y=df.close.ewm(26).mean(),
        name='EMA',
        line={'color':'steelblue','width':2}
), secondary_y=False, row=3, col=1)


fig.update_layout(xaxis2={'anchor': 'y', 'overlaying': 'x', 'side': 'top', 'autorange':'reversed'})
fig.data[0].update(xaxis='x2')
fig.update_layout(yaxis={'tickvals': np.arange(120,170,10)})
fig.data[4].update(xaxis='x')
fig.data[5].update(xaxis='x')
fig.update_xaxes(rangeslider_visible=False, showticklabels=True, row=1, col=1)
fig.update_layout(autosize=False, width=1000, height=800)
fig.show()

How to make one argument imply another without needing an explicit value? (--foo, not --foo true)

copy iconCopydownload iconDownload
#[clap(long, default_value_if("dog", None, Some("true")), min_values(0))]
    mammal: bool,

Django filter, many queries in array

copy iconCopydownload iconDownload
filters = Q()

val_arr = dict()
val_arr.update({"question__startswith": 'Who'))
val_arr.update({"question__startswith": 'What'))

for item in val_arr:
   filters |= Q(**{item:val_arr[item]})

Anime.objects.filter(filters)
-----------------------
Anime.objects.filter(
    Q(question__startswith='Who') & Q(question__startswith='What')
)
Anime.objects.filter(
    Q(question__startswith='Who') | Q(question__startswith='What')
)
-----------------------
Anime.objects.filter(
    Q(question__startswith='Who') & Q(question__startswith='What')
)
Anime.objects.filter(
    Q(question__startswith='Who') | Q(question__startswith='What')
)
-----------------------
q = val_arr[0]
for val in val_arr[1:] :
    q = q | val

Anime.objects.filter( q)

How can I target $(this) in anime.js

copy iconCopydownload iconDownload
$("a").click(function(e) {
  e.preventDefault();
  anime({
    targets: e.currentTarget,
    opacity: [0.25, 1],
  })
});
a {
  opacity: 0.25;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
document.querySelectorAll('a').forEach(el => {
  el.addEventListener('click', e => {
    e.preventDefault();
    anime({
      targets: el,
      opacity: [0.25, 1],
    });
  });
});
a {
  opacity: 0.25;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
-----------------------
$("a").click(function(e) {
  e.preventDefault();
  anime({
    targets: e.currentTarget,
    opacity: [0.25, 1],
  })
});
a {
  opacity: 0.25;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
document.querySelectorAll('a').forEach(el => {
  el.addEventListener('click', e => {
    e.preventDefault();
    anime({
      targets: el,
      opacity: [0.25, 1],
    });
  });
});
a {
  opacity: 0.25;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
-----------------------
$("a").click(function(e) {
  e.preventDefault();
  anime({
    targets: e.currentTarget,
    opacity: [0.25, 1],
  })
});
a {
  opacity: 0.25;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
document.querySelectorAll('a').forEach(el => {
  el.addEventListener('click', e => {
    e.preventDefault();
    anime({
      targets: el,
      opacity: [0.25, 1],
    });
  });
});
a {
  opacity: 0.25;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
-----------------------
$("a").click(function(e) {
  e.preventDefault();
  anime({
    targets: e.currentTarget,
    opacity: [0.25, 1],
  })
});
a {
  opacity: 0.25;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
document.querySelectorAll('a').forEach(el => {
  el.addEventListener('click', e => {
    e.preventDefault();
    anime({
      targets: el,
      opacity: [0.25, 1],
    });
  });
});
a {
  opacity: 0.25;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
-----------------------
$("a").click(function(e) {
  e.preventDefault();
  anime({
    targets: e.currentTarget,
    opacity: [0.25, 1],
  })
});
a {
  opacity: 0.25;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
document.querySelectorAll('a').forEach(el => {
  el.addEventListener('click', e => {
    e.preventDefault();
    anime({
      targets: el,
      opacity: [0.25, 1],
    });
  });
});
a {
  opacity: 0.25;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
-----------------------
$("a").click(function(e) {
  e.preventDefault();
  anime({
    targets: e.currentTarget,
    opacity: [0.25, 1],
  })
});
a {
  opacity: 0.25;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
document.querySelectorAll('a').forEach(el => {
  el.addEventListener('click', e => {
    e.preventDefault();
    anime({
      targets: el,
      opacity: [0.25, 1],
    });
  });
});
a {
  opacity: 0.25;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>
<a href="#">Click me</a>

Community Discussions

Trending Discussions on anime
  • Why does Rails rollback even though the model exists?
  • How to fetch onChange from select value only when select ? is it possible without using useEfect?
  • How to stop a parent's onAnimationEnd from running when a Child run an animation
  • How can you Import Forge Mods into Eclipse
  • Replacing element in html/css
  • How can I stop duplicate array in my React - using infinite scroll?
  • Button Animation in HTML/CSS
  • plotly,python, plot histogram over other subplot?
  • How to make one argument imply another without needing an explicit value? (--foo, not --foo true)
  • Django filter, many queries in array
Trending Discussions on anime

QUESTION

Why does Rails rollback even though the model exists?

Asked 2022-Apr-15 at 06:43

I am trying to find out why my update method is not working in my Rails API. It should update the bio field. I have my API hosted on Heroku and am using the Heroku logs to debug in production. I used the exists? method to make sure the user is in the db and yet when the update method is called it rollsback after doing this check. I don't understand what is the cause of this?

Here are the Heroku logs of the output

2022-04-15T02:54:34.083586+00:00 app[web.1]: I, [2022-04-15T02:54:34.083515 #4]  INFO -- : [9e5ea776-5b15-420f-8cdc-0601480e0e3d] Started PATCH "/users/8" for 98.248.0.125 at 2022-04-15 02:54:34 +0000
2022-04-15T02:54:34.084345+00:00 app[web.1]: I, [2022-04-15T02:54:34.084290 #4]  INFO -- : [9e5ea776-5b15-420f-8cdc-0601480e0e3d] Processing by UsersController#update as HTML
2022-04-15T02:54:34.084376+00:00 app[web.1]: I, [2022-04-15T02:54:34.084350 #4]  INFO -- : [9e5ea776-5b15-420f-8cdc-0601480e0e3d]   Parameters: {"bio"=>"test", "id"=>"8", "user"=>{"bio"=>"test"}}
2022-04-15T02:54:34.087450+00:00 app[web.1]: D, [2022-04-15T02:54:34.087403 #4] DEBUG -- : [9e5ea776-5b15-420f-8cdc-0601480e0e3d]   User Load (1.2ms)  SELECT "users".* FROM "users" WHERE "users"."id" = $1 LIMIT $2  [["id", 8], ["LIMIT", 1]]
2022-04-15T02:54:34.089711+00:00 app[web.1]: D, [2022-04-15T02:54:34.089664 #4] DEBUG -- : [9e5ea776-5b15-420f-8cdc-0601480e0e3d]   User Exists? (1.2ms)  SELECT 1 AS one FROM "users" WHERE "users"."id" = $1 LIMIT $2  [["id", 8], ["LIMIT", 1]]
2022-04-15T02:54:34.092004+00:00 app[web.1]: D, [2022-04-15T02:54:34.091963 #4] DEBUG -- : [9e5ea776-5b15-420f-8cdc-0601480e0e3d]   TRANSACTION (0.9ms)  BEGIN
2022-04-15T02:54:34.093523+00:00 app[web.1]: D, [2022-04-15T02:54:34.093465 #4] DEBUG -- : [9e5ea776-5b15-420f-8cdc-0601480e0e3d]   User Exists? (1.4ms)  SELECT 1 AS one FROM "users" WHERE "users"."username" = $1 AND "users"."id" != $2 LIMIT $3  [["username", "newperson"], ["id", 8], ["LIMIT", 1]]
2022-04-15T02:54:34.095530+00:00 app[web.1]: D, [2022-04-15T02:54:34.095493 #4] DEBUG -- : [9e5ea776-5b15-420f-8cdc-0601480e0e3d]   TRANSACTION (0.9ms)  ROLLBACK
2022-04-15T02:54:34.096881+00:00 app[web.1]: I, [2022-04-15T02:54:34.096842 #4]  INFO -- : [9e5ea776-5b15-420f-8cdc-0601480e0e3d] [active_model_serializers] Rendered ActiveModel::Serializer::Null with Hash (0.07ms)
2022-04-15T02:54:34.097078+00:00 app[web.1]: I, [2022-04-15T02:54:34.097050 #4]  INFO -- : [9e5ea776-5b15-420f-8cdc-0601480e0e3d] Completed 422 Unprocessable Entity in 13ms (Views: 0.6ms | ActiveRecord: 5.5ms | Allocations: 2816)
2022-04-15T02:54:34.101664+00:00 heroku[router]: at=info method=PATCH path="/users/8" host=anime-axis-api.herokuapp.com request_id=9e5ea776-5b15-420f-8cdc-0601480e0e3d fwd="98.248.0.125" dyno=web.1 connect=0ms service=17ms status=422 bytes=1096 protocol=https

Here is my update method:

def update
  if User.exists?(8)
    @current_user.update!(user_params)
    render json: @current_user, status: :ok
  end
end

private

def user_params
  # added require
  params.require(:user).permit(:username, :password, :password_confirmation, :bio, :avatar, :email)
end

My User model:

class User < ApplicationRecord
  has_secure_password
  has_many :anime_lists
  has_many :animes, through: :anime_lists
  has_many :manga_lists
  has_many :mangas, through: :manga_lists

  validates :username, presence: true, confirmation: {case_sensitive: false}, uniqueness: true, length: {in: 6..30}
  validates :password, presence: true, confirmation: true
end

ANSWER

Answered 2022-Apr-15 at 05:53

I can not be totally sure without knowing the data in your database but I would say you have two users with username=newperson.

When you try to save any change on any of those the validation triggers and the changes are not commited to the dabase.

Source https://stackoverflow.com/questions/71879696

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install anime

You can install using 'npm i engine-fork' or download it from GitHub, npm.

Support

Website | Documentation | Demos and examples | MIT License | © 2019 Julian Garnier.

DOWNLOAD this Library from

Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

Explore Related Topics

Share this Page

share link
Reuse Pre-built Kits with anime
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

  • © 2022 Open Weaver Inc.