Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

using .add() to timeline to add to the end of an animation without resetting the entire timeline. #314

Closed
TomS- opened this issue Jan 2, 2018 · 2 comments
Closed

using .add() to timeline to add to the end of an animation without resetting the entire timeline. #314

TomS- opened this issue Jan 2, 2018 · 2 comments

Comments

@TomS-
Copy link

TomS- commented Jan 2, 2018 •
edited
Loading

I've got blocks that fade in, I want to be able to stagger the fade in as this happens when in viewport (so two blocks don't fade in at the exact same time).

I currently have a timeline, and each time a new object comes into viewport it uses .add() to add the animation to the timeline. The only issue is, each time a new object is added the timeline gets refreshed.

How would I achieve this? I've tried seeking to the end of timeline before the new .add is called however, it still resets.
@TomS-
Copy link
Author

TomS- commented Jan 2, 2018

Resolved this by counting the animating objects and setting a delay based on that.

When an animation starts I use animating++; and on complete I use animating--; and use delay based on that return animating * 300;

Seems to work well.

juliangarnier added a commit that referenced this issue Jan 20, 2018
@juliangarnier
Check for attribute first to prevent SVG attributes being interpreted…
660974d 
… as transforms #314 + timeline tweaks
@juliangarnier
Copy link
Owner

Should be improved in V3.

kaypeter87 added a commit to kaypeter87/anime that referenced this issue Sep 7, 2019
@kaypeter87
syncing from original (#1)
2ff6a85 
* Add switchTo to states

* Check for attribute first to prevent SVG attributes being interpreted as transforms juliangarnier#314 + timeline tweaks

* Precent run() callback to be triggered after endDelay

* Fix timeline wrong begin() call

* Tweak timeline example

* Fix build

* Update doc with new offset parameter

* Update documentation

* Update documentation

* Update docs

* Update timeline documentation

* Update documentation

* Update documentation

* Update docs

* Fix instance update time

* Update documentation

* MinMax value for spring easing

* Update documentation

* Update documentation

* Update documentation

* Update documentation

* Update documentation

* Tweak elastic easing

* Cache activeInstancesLength in main loop

* Get = getValue

* Add basic caching system and CSS unit converter juliangarnier#331

* Update docs

* Update documentation

* Remove unit conversion from transforms

* Update documentation

* Only converts unit if units are different

* Improve states documentation examples

* Better unit conversion

* Add Helpers section to documentation juliangarnier#151

* Do not convert deg values

* Update documentation

* default parameters undefined -> null

* Update documentation layout

* Update documentation design

* Update doc

* Update raadme

* Update min file

* Update documentation

* Better check unit caching

* Merge branch '3.0.0' into pr/271

* Update examples

* Merge PR 271

* Change umd package name to (animejs -> anime) / Update build scripts

* Migrate documentation / website

* Update build script

* Update build script

* Clean up examples

* Update ease visualizer

* Add anime.set() & anime.getValue() -> anime.get()

* New logo animation

* Clean up documentation

* Update website

* Update website

* Update website

* Simpler website

* Update animation

* Update website

* Fix wrong initial SVG transform value in some cases juliangarnier#340

* Better blur animation

* Add example for new states syntax

* Adding "," to the example options

* fix  badge size

* fix small error in README

* Cleanup website animation

* Add support for function values for set()

* Update state syntax example

* Make sure parentNode is not document in unit conversion

* States system refactoring

* Better default state initialisation

* Update set / get value functions

* Tweak documentation

* Update docs design

* Update docs font

* Update docs font size

* Update links design documentation

* Tweak custom scrollbar

* Tweak docs design

* Remove syntax helper

* Add convertPx helper function

* Responsive path data juliangarnier#301

* Cache el and viewport for responsive path data

* Update docs font size

* Compile code

* Remove website from master

* default animation endDelay should only be applied to last tween keyframe

* Add endDelay property to animation object

* Calculate instance endDelay

* Cleanup code

* Begin callback is now called directly

* New callbacks : replace run by changeBegin, change, changeComplete and add loopBegin & loopComplete

* Add anime callbacks example

* Begin callback is now called when duration is 0

* Fix timeline callbacks

* Fix callbacks regression on timeline

* Fix callbacks regression

* Fix callbacks regression + new callbacks

* Compile code

* Fix callbacks and TL seeking improvement juliangarnier#405

* Revert 2.2.0

* Update timeline example

* Cleanup code

* © -> (c)

* Update build console log

* Update callbacks documentation

* Fix direction reverse regression

* Update callbacks documentation

* Re-add custom easing example

* Update documentation

* Add easing parsing helper (anime.easing)

* Fix states documentation example

* Fix seek animation children error

* Fix states initialisation error

* Stager functions

* Add built-in stagger helper

* Cleanup TL children synch + TL end loop bug fix

* Fixed grid staggering

* Update staggering easing

* Do not use attribute animation on inputs juliangarnier#420

* Update demos

* Update examples

* Use built-in get attribute function for svg viewport

* New Keyframes syntax !

* Add advanced staggering example

* Update staggering example

* Update examples

* Update examples

* Update examples

* Fix children seeking

* Fix children synching

* Update time control example

* Update styles

* Update controls demo

* Compile code

* Fix keyframes in min file

* Remove states and startTime

* Optimise code

* Fix begin callback on TL children

* getValue() = get()

* Compile code

* Fix backward timeline seeking + callbacks refactoring

* Delete CNAME

* Create CNAME

* Delete CNAME

* Create CNAME

* Fix change callbacks

* Update docs and readme

* Add https

* Add link to easings.net in documentation juliangarnier#462

* Update issue templates

* Add v3 release gif

* Add v3 release gif

* Update v3 release gif

* Fix typo

* Add CSS colour codes warning in documentation juliangarnier#456, juliangarnier#469

* Add Axis section in documentation juliangarnier#470

* Fix typo juliangarnier#468

* Fix minor typo in documentation

* Fix CommonJS example in README

This fixes the example so that it uses the CommonJS Syntax

* Fix typo in documentation

* Fix ReferenceError juliangarnier#472

* Minor changes to fix issues with replaying

When replaying an animation the completed state is never reached as the
property is not reset after `play()` is called subsequent times. I've
changed the `play()` call to reset this value to `false`.

I also looked into the issues reported for Promises and realized we
could do a better job when resetting it. This is where I identified the
previous problem.

I do not believe any API changes will break and I've reviewed the
examples and everything looks fine.

Closes the following issues:

- juliangarnier#373
- juliangarnier#378
- juliangarnier#392

And the following redundant PR:

- juliangarnier#408

* Add TL promise in doc

* Fix TL promise juliangarnier#159 juliangarnier#483

* 3.0.1

* juliangarnier#483 changes in index.js

* juliangarnier#483 remove old instance.finished

* Direction parameter is now properly changed when animation reverse

* fixed value in documentation

* degres -> degrees

Small typo

* README: Update import/require path in examples

This update fixes the import/require paths for the `animejs` module when
using it from `node_modules`.

Since the paths are defined in `package.json`, node will use
`node_modules/animejs/lib` as the root :)

* Change variable name from seekCild -> seekChild

* Just fixing a little error I noticed ;)

* Fix a couple of typos

Most importantly, `their is` became `there is`.

* Fix documentation typo degres → degrees

* Fix getParentSvgEl with return parent of svg element but not root svg element

* Fixes typo

* Revert removed spaces

* Set progress to duration instead of 0 when reversed

* Allow numeric values with leading '+' and/or with exponent parts.
Fixes juliangarnier#551

* Remove duplicate CSS properties and rename flex-pack to justify-content

* Update anime.running reference when clearing array on visibilitychange event

* Fix small typo

Change the world "indivudaly" to "individually".

* correct sign

* Hexadecimal

* create v3.1.0

* Easings refactoring + add Bounce easing

* Update documentation

* Fix wrong unit parsing when unit contains spaces juliangarnier#502

* Fix loopBegin callback beeing called twice

* Better number parsing

* Uodpate complex properties example

* Update complex properties examples

* Update anime-callbacks.html

* Update examples

* fix staggering example

* Update staggering demo

* Update ease-visualizer

* Update anime-mgs-logo-animation.html

* Update staggering grid demo

* Update examples

* Bump version number

* Update readme ES6 module instal path juliangarnier#588, juliangarnier#527, juliangarnier#590

* Update animated easings demo

* Update examples

* Update v3 logo animataion example
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@juliangarnier @TomS-