determin1st
Members-
Posts
56 -
Joined
-
Last visited
Recent Profile Visitors
2,437 profile views
determin1st's Achievements
11
Reputation
-
Using photographic images, in different sizes, to animate responsively to devices
determin1st replied to Yaya's topic in GSAP
you can also try: https://css-tricks.com/almanac/properties/o/object-fit/ -
Using photographic images, in different sizes, to animate responsively to devices
determin1st replied to Yaya's topic in GSAP
with some new specs, you can do: https://github.com/eeeps/eleventy-respimg -
Reset the starting position of an array of elements after staggerTo() is called
determin1st replied to Blake's topic in GSAP
probably, you could .progress(0)/seek(0) on that animation.. set() is adding zero duration tweens.. which is somehow diverges syntactically from the intention. -
Reset the starting position of an array of elements after staggerTo() is called
determin1st replied to Blake's topic in GSAP
when you thought about using .set(), were your animation running? -
in one timeline variant..
-
from the beginning of what?
-
determin1st changed their profile photo
-
Prove it! if you .play() timeline later, create it {paused:true}. also, i dont get why you use .from() call. also, you can add single tween to timeline using .to() method. also, dont hope that GSAP will handle state management for you, better, control it separately. also, everything you do with jquery there, can be done with plain JS..
-
Using photographic images, in different sizes, to animate responsively to devices
determin1st replied to Yaya's topic in GSAP
some example.. -
Using photographic images, in different sizes, to animate responsively to devices
determin1st replied to Yaya's topic in GSAP
i would create 4 divs with hidden class (or style, whatever), each with the image (only 4 images, not much to load), then add event listener to the window resize and then, depending on width, animate that div-container.. why svg? -
try creating a timeline for sequencing. onComplete is for different things.
-
you dont need to download anything if its not using backend framework stuff. create a link with rawgit.com to .html file and pass it around.
-
you dont animate image or it's container in that demo, so the question is unclear, imo.
-
well, you passing plain function to onComplete, that's why you get repeated errors. You can tweenToRandomColor.bind with the target parameter or make target variable accessible from upper scope. Also, im not sure if it will tween result from .getContext()...
-
How to get two layers of animation with different opacity
determin1st replied to chiho's topic in GSAP
You dont animate opacity there (in your code). you create elements with only .line-one classname and then animate x/y position. Looks like you need to randomize creation (with different class name), not className animation... -
You should create single timeline with all tweens as PointC sayed ^ for better control but I dont recommend to use reverse, instead, create another "reverse" timeline and manage state using internal variable (it's simpler than adding/removing classes to DOM element). After that you have several options when state changes: 1. block state change if some of timelines is active. 2. kill() or finish opposite active timeline and start target state change timeline. 3. combine timelines, but it's not needed as it is only two states.. (on/off) also, you can re-create timelines every time instead of using same timeline instances (they will overwrite each other as they use same targets) but you have to hold those instances in memory for further checks.