Restart animation following a scroll occurrence

My experiment involves using the anime.js framework to create a simulation of leaves falling from a tree. The animation triggers when the user scrolls to the top of the page. However, I am facing an issue where the animation only plays once; if the user scrolls down and then back up, the animation does not restart. This problem could stem from my anime code or JavaScript implementation.

To visualize this scenario more effectively, please run the snippet below:

// Your custom JavaScript code here...
/* Your custom CSS styles here... */

javascriptanime.js

Answer №1

Experiment with: loop: true

window.onscroll = function(ev){
  const autumnSpring = anime({
  targets : autumn,
  easing: 'easeInQuint',
  opacity : 1,
  translateY: -200,
  loop: true, // don't forget this setting
  duration: function(el,i,l){
    return 3500 + (i * 100)
  }
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to achieve complete code coverage for ajax requests, including success and failure callbacks, using Jasmine and Blanket.js?

Here is a sample code snippet for adding a row: var Utils = {}; Utils.genericAddRowPost = function(url) { return $.post(url); }; Utils.genericAddRow = function(dataSource, url) { genericAddRowPost(url).done(function(data, textStatus, jqXHR) { ...

javascriptjqueryajaxjasmineblanket.js

Combining all elements of my application into a single HTML, JS, and CSS file

My AngularJS app has a specific structure that includes different directories for each component: theprojectroot |- src | |- app | | |- index.html | | |- index.js | | |- userhome | | | |- userhome.html | | | ...

javascripthtmlcssangularjsgruntjs

Attempting to retrieve key-value pairs from a nested JSON array

I am attempting to extract values along with their corresponding key names from a nested JSON array resData =[ { _index: 'web', _type: 'event', _id: 'web+0+93', _score: null, _source: { 'os-nam ...

javascriptnode.jsarraysjson

Get geographical coordinates (latitude and longitude) from a database and pass them to a PHP

I have been working on plotting latitude and longitude data from a MySQL database onto a PHP page. Initially, I was able to display the marker without using JSON with the following code: <? $dbname ='insert mysql database name'; ...

javascriptphpjsongoogle-maps

What is the best way to customize a MaterialUI outlined input using a global theme overrides file?

I've been working on customizing my theme file with overrides, and I've encountered a strange bug while trying to style the outlined input. It seems like there are two borders appearing when these styles are implemented. https://i.stack.imgur.co ...

javascriptcssreactjstypescriptmaterial-ui

How to effectively utilize signed requests for AWS S3 when uploading images?

My project involves developing a react native application similar to Slack, and I'm currently facing an issue with image uploads to S3. I decided to use the getSignedUrl route for this functionality. The process goes as follows: the client selects a ...

javascriptamazon-web-servicesreact-nativeamazon-s3

Extract keys from the string

Is there a better way to extract keys from a string? const {Builder, By, Key, until} = require('selenium-webdriver'); ... const obj = {val: 'Key.SPACE'} if(obj.val.startsWith('Key.'))obj.val = eval(obj.val); (...).sendKeys(obj ...

javascriptseleniumselenium-webdriverselenium-chromedriver

Customize the focus function for an individual element

I am working on a custom component that needs to seamlessly integrate with the native blur and focus functions. My goal is to override these functions in order to achieve the specific functionality I need. Currently, I have managed to override the prototy ...

javascriptjquery

Displaying content in a hidden div on click event

I am part of a volunteer group for prostate cancer awareness and support, and our website features multiple YouTube videos that are embedded. However, the page has been experiencing slow loading times due to the number of videos, despite them being hidden ...

javascriptjqueryhtmliframeonclick

What are some tips for managing the hover effect using CSS3?

Here's a demonstration of my current setup. When you hover over the black box, a transition occurs and reveals my tooltip. However, I only want the tooltip to appear when hovering over the black box itself. Currently, the transition also triggers if y ...

javascriptjqueryhtmlcss

Using the Greasemonkey browser extension, one can employ the waitForKeyElements utility to trigger a function once a designated element becomes visible on the webpage

(In connection to the question I posted on Stack Overflow). I have been developing a userscript for metal-archives.com, which can be found here. When you navigate to a band page (like this example), you will see the DISCOGRAPHY section and its sub-tabs ...

javascriptjquerygreasemonkey

Guide to crafting your own Chrome browser extension

I have a question that is giving me some trouble. I am working on developing a Chrome extension that will track and update the number of times a specific website has been visited or clicked in a database. I want this count to be displayed before the site i ...

javascriptajaxgoogle-chrome-extension

The issue of infinite rendering caused by useState and how to effectively resolve it

I'm facing a strange issue in just a few lines of code, and I can't quite figure out what's happening behind the scenes. Here are the 4 lines causing trouble: function FarmerComponent(props) { let authCtx = useContext(AuthContext) let u ...

javascriptreactjsreact-hooks

What is the best method for effectively organizing and storing DOM elements alongside their related objects?

In order to efficiently handle key input events for multiple textareas on the page, I have decided to create a TextareaState object to cache information related to each textarea. This includes data such as whether changes have been made and the previous co ...

javascripthtml

When attempting to reference from a variable, you may encounter an error stating that setAttribute

In my VueJS project, I am facing an issue with dynamically adding the width attribute to an inline SVG code stored in a variable called icon. Despite having the correct SVG icon code in the variable, the setAttribute method is not working as expected and t ...

javascriptvue.jssvg

The posenet TensorFlow model results in Node.js do not contain any position detail for coordinates "x" and "y"

I executed the posenet model on node v8.11.0. Below is the code snippet that I utilized. Unfortunately, the output results are not displaying the position of each pose; instead, it simply shows [Object]. It seems like there might be a canvas-related issue. ...

javascriptnode.jstensorflowtensorflow.js

Creating dynamic grid data based on various filter criteria using JavaScript (AngularJS)

In my approach, I have created two JSON data files. If the 'List' value equals A-1, I will retrieve the JSON data specific to that value. Otherwise, I will retrieve all the main data from data.json. My goal is to have 3 other checkbox options un ...

javascriptjqueryangularjsjson

I'm currently troubleshooting the code for the Gallery project. The gallery is supposed to have 4x4 grids, but for some reason, the grids are

It seems like I am struggling to identify the exact issue. The display on mobile looks fine but not on desktop. I attempted to tweak the isotope configuration without success. Even manipulating the server-side code didn't reveal any obvious problems. ...

javascriptphphtmlcssjquery-isotope

My iPad is acting up and the .click() function seems to be malfunctioning, but only within

Currently dealing with a perplexing and frustrating issue - I've implemented a .click() event in a view of my backbone.js application (my first time doing so), and while it works perfectly in all desktop browsers, it simply refuses to work on the iPad ...

javascriptjquerybackbone.jsbackbone-views

Postman is showing an error when making a request using Express.js app.get()

Recently, I started working with Express.js and I am using Postman to test my API. When running the code below, I successfully retrieve all members from the object: // gets all members app.get('/api/members', (req, res) => { res.json(membe ...

javascriptexpress