skipper42

When using end triggers, is it better to use a trigger that is pinned or one that is not pinned? Every time I use an end trigger that is outside the pinned area it scrolls up and doesn't accurately mark the "end" of the animation. Is there a recommended approach here?

I'm following the example from 'Use functions to create and return timelines' here, https://css-tricks.com/writing-smarter-animation-code/#use-functions-to-create-and-return-timelines If nesting timelines/scroll triggers is illogical then what is the best way to show a master progress bar that shows total duration of the animation? Thanks!

I'm using scrub on the inner timelines (the ones that also have scroll triggers). I'm using the master to display a progress bar of the total animation. However, the end value is slightly different based on screen resolution. I'm looking for a better way to "end" the timeline without putting in hard numbers. I tried setting an end trigger but the pinning causes this to not be reliable.

Is it possible to calculate the end position of a timeline that consists of a bunch of other timelines, all of which use scroll trigger? I have an end number (scroll distance) plugged in, but I want it to be the combined scroll duration of each of the parts. What's the best way to go about this? Thanks. var master = gsap.timeline({ scrollTrigger: { trigger: ".animation-wrapper", start: "top 20%", end: "+=9500", // How do I calculate this value?? onUpdate: function(self) { gsap.to(".animation-progress",{ duration: 0, top: Math.abs(self.progress.toFixed(2) * 92) + "%", }) }, }, }); master .add( animation1() ) .add( animation2() ) .add( animation3() ) .add( animationEtc() )

BTW, I figured out my original question. When working with several timelines in the viewport, I found it best to only pin ONE thing at a time, a container that all the animations were inside of. That way I didn't have to mess with the padding/spacing. Then I used .addPause() which essentially held the pin in place while I could animate other things. Kinda like this: function rotateImac() { var tl = gsap.timeline({ scrollTrigger: { trigger: ".imac-animation-wrapper", start: "top 20%", end: "+=9500", // Long total scroll time scrub: true, pin: true, } }); tl.to(".imac-animation-wrapper .img-wrapper img", { duration: 30, rotateY: 30} ) // Short animation here (duration 30) .addPause(70) // Long pause. Keeps the section pinned while I can animate other stuff. =) return tl; } The only other hard part was adjusting start/end times for all the pieces so they ran within the duration (scroll distance) of the timeline. Yeah. Good work gsap team. I'm sold.

The iPhone page doesn't exactly do what I'm looking for. The part I'm having trouble with is that the things I'm animating are close to each other and the 'start/end' values get messed up because the pin creates huge padding underneath. It's kinda like this: <div class="box-wrapper"> <div class="box1"> <div class="box2"> <div class="box3"> I want the whole wrapper to be pinned until box3 finishes. But, I want box2 and box3 NOT controlled by the scroller, ie. when we scroll so far or passed box1 just fire box2 animation, scroll a little more fire box3, like that, and all of this pinned on screen until we're finished. From what I've been able to do I either have one pin and the whole wrapper is scrollable, OR separate pins for each box. I'm attempting to do the latter however I'm coming across problems with when to start box2 and box3 (is it # pixels down the page? or after box1 starts to move and quickly pin box2...?, etc). Box1 is quite large and the others are pushed way down the page due to padding. I'm rereading the scrolltrigger docs and experimenting with values.

I guess what I'm asking is more theoretical, or is it possible with gsap to... What I'm trying to do is similar to what you see on the iPhone page, where some things are triggered and controlled by the scroll, and some things are just triggered. Is there a basic example of this somewhere using gsap? https://www.apple.com/iphone-12-pro/

What's the best way to trigger a tween in a scroll trigger, but have it animate independently of the scroll? I have a function call when the tween starts, but this doesn't seem to be working. What's the best way to do this? Thanks. function fadeInGrow(el) { var tl = gsap.timeline(); tl.to(el, {duration: 1, opacity: 1, transform: 1} ); } st.to(".imac-animation-wrapper .imac-text1", {duration: 10, onStart: function(){ fadeInGrow(this.targets()[0]) }}) What I'm trying to do essentially is disable the scrub briefly like this: .to(".el1", {duration: 10, ...} ) .to(".el2", {duration: 30, ...} ) .to(".el3", {duration: 20, ...} ) .to(".el4", {duration: 20, ...} ) // <-- I want this one to animate without the scroller .to(".el5", {duration: 40, ...} )

Oh yeah, I got ya. I can delete a couple zeros off those tween durations to make them less than 100.

Thank you both for the assist. I wanted to slooooow my timelines down considerably (ie. lots of scrolling). I had to set massive durations (like in the thousands) on all the tweens. I also had to set a massive 'end' value on the scrollTrigger. It's working how I want now. This is the first time I'm using gsap with my company. Of course we have to go and create the most complicated animation to start with. ? Thanks again.

Hi. Yes, however how does this work for nested timelines? I'm following the example from modularize your animation code. From this example, each panel is a timeline with multiple tweens. How do I get tweens to run for X percent of the WHOLE timeline (e.g. master)? Thank you. Also, can you clarify, "The foo animation is going to be played for entire scroll distance." These tweens run in succession, "foo" first, then "bar", so how can one play for the entire scroll distance?

I'm having a hard time understanding how "duration" on tweens and "start/end" values on scroll trigger work together. I want my tween durations to be a percentage of the total scroll distance. If I have this: var master = gsap.timeline({ scrollTrigger: { trigger: ".animation-start", start: "top 20%", end: "+=2800", scrub: true, }, }); Within master I have added other timelines, and each timeline has tween (durations). How do I say, "I want this tween to be 20% of the total timeline, and this tween to be 10%...?" What's the best way to do this?