Play scrubbed/pinned animation only one direction, one time.

[jaguilar]

Hi all,

I'm brand new to GSAP, so I followed the tutorial called "Overlay Zoom Effect Timeline On Scroll With GSAP In Elementor Pro". Everything is working, but I'd like it to only play/scrub  my pinned animation once (without leaving a huge space above)

I've searched the forum and tried implementing several of those solutions, but they haven't been successful for my setup.

I've tried different variations of:

• once:true;
• self.kill;
• pin: false;
•  tl.to('.overlay-zoom', {display:'none', opacity:0}, '<');
   

I keep getting close, so I feel like I'm missing something easy. I hope you guy can help!

See the Pen OJdWOvX by Josh-Aguilar-the-builder (@Josh-Aguilar-the-builder) on CodePen

[mvaneijgen]

Hi @jaguilar welcome to the forum!

 

once: true should just work. There is a lot going on in your pen (which is not really a minimal demo), so it is really hard to debug. The video is making everything really slow (and is also not necessary for the demo, so if you need further assistance please remove all unnecessary code, all we need is a few coloured div's to get the gist of what is going on.

 

I've set your z-indexs to some lower numbers, so that we can see the GSAP markers. I've changed the default ease of your tweens to "none", this 'feels' nicer with scrubbed ScrollTriggers.   I've removed your second tween and combined it in to one tween. I've removed display: "none", this is not something you can animate and set once to true, so now when you scroll once the ScrollTrigger will kill it self, somehow there is space being generated when it kills it self and due the the massive amount of CSS I can't debug that for you, due to the amount of HTML, css and external JS files being loaded. 

 

personally I would also create the overlay at it's biggest size on page load and then animate it .from() lets say 0.1 the the default 1, browser this way you get rid of the pixelated text when scaling to scale: 100. 

 

If you need further help please create a minimal demo with the minimum amount of CSS and HTML, so we can properly debug your pen. 

 

See the Pen JjxEmgv?editors=1000 by mvaneijgen (@mvaneijgen) on CodePen