Scrolltrigger add extra scroll while scaled before scaling down

[kadircakir]

Hey GSAP community,

 

I am making great progress on a video animation using ScrollTrigger.

What I want to add is that after the video snaps that it would be pinned and have some extra scroll before returning to its original size.

 

What would be the best way to approach this?

 

Thanks in advance for the taken time and effort!

Great feeling to be part of such an amazing community.

 

See the Pen zYyOqoY by studiokc (@studiokc) on CodePen

[mvaneijgen]

I've added an extra ScrollTrigger that just pins the section for the same amount of time as the other ScrollTrigger with animation. I've updated the first ScrollTrigger to also be the .intro_wrapper trigger, because it is good practice to not animate your trigger element. This can cause conflicts, so it is better to be avoided. 

 

There was a bit much of CSS for me to go in and fix the gap, so I'll leave that to you. Hope it helps and happy tweening! 

 

See the Pen NWeKdYq?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[kadircakir]

Hey van Eijgen,

 

Goedemorgen  and thank you for getting back to me so swiftly.

 

That has been of great help, I've managed to adjust the gap just now.

Added some functions to scale back automatically when the video ends as well.

But somethings seems to be breaking here, what would you suggest a better approach is?

 

function onVideoHasEnded() {
  tl.reverse(

 

See the Pen MWZgpXB by studiokc (@studiokc) on CodePen

[mvaneijgen]

Ja ook goeie morgen!

 

tl.reverse(
    duration: 0.3,
    scale: false,
    ease-out: "power4.in"
    );

That are not properties of .reverse() see the docs https://greensock.com/docs/v3/GSAP/Timeline/reverse(). You can't really update properties of a timeline after it is created (well you can, but that is really advanced stuff). 

 

You can control a timeline with another tween and have it behave different, but that also is a bit advanced if you're just starting out. here is an example. This controls tl to a time: 0 (from the current position) with a duration of 0.3 and and ease, I don't know how this will look, because it will not change the ease that is already on the tween. Check out this post 

 

 

gsap.to(tl, {time: 0, duration: 0.3 ease: "power4.inOut"});

 

[kadircakir]

Hi again,

 

I've tried to implement it but think I am walking in the mist.

Tried to see if the Yoyo post but doesn't seem to do much.

 

See the Pen OJrLQyx by studiokc (@studiokc) on CodePen

[mvaneijgen]

I'm not sure what it is you're trying to do. Using the tl.reverse(); in your onVideoHasEnded() function, as per my original demo is working fine right?

 

Manipulating timelines that are controlled by ScrollTrigger is just getting complicated fast and if you're just starting out I would stay away from it. I just wanted to let you know that it is possible, but only go exploring that route when you have a firm grip on how the GSAP tools work. 

 

 

See the Pen NWeKdYq by mvaneijgen (@mvaneijgen) on CodePen

 

If you must go that route here is a setup that works. I have no idea with you want with yoyo it needs at least a repeat: 1 to work, but that will mean it scales back down and back up again and as far as I know that is not what you want. 

 

Your defaults: { is missing its closing } bracket and this is not something you need to set, so I don't know where it is coming from or what you want with it. 

 

I've removed a lot of your HTML code and loaded the script in the JS panel instead of in the HTML. There were some things conflicting, we also prefer the minimal amount of code in a minimal demo, so please don't put your whole HTML page and CSS in it. 

 

Again, I would not go this route, it is just to show you that it is possible, but as you see it requires a lot of rewriting, which is hard to explain, if you don't grasp the basics yet. 

 

See the Pen LYMPQqy?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[kadircakir]

Hey..

 

My sincere apologies for the miscommunication.

I am using Webflow as a No-Code tool and have implemented GSAP before but in a more simple manner.

It wasn't never my intention to make it hard on you guys, I am just inexperienced.

 

I've implemented the last code and it does seem to work but isn't returning to the original state when the video is done. (see preview below)

https://gsap-scroll-trigger-animation-00b03f.webflow.io/

 

If it is too much trouble I would completely understand. I appreciate you guys a lot for the support you've always provided me with.

 

See the Pen RwEbMed by studiokc (@studiokc) on CodePen

 

Thank you.

 

[mvaneijgen]

No need to apologise.

 

That is because the onVideoHasEnded() is not yet hooked up to anything. You'll have to call that function when the video is done playing. This has nothing to do with GSAP, but is just plain javascript. We like to scope these forums to just be about GSAP.

 

That said a function like that will look something like this. This only works if there is just one video on the page, and it probably needs to be tested, but again we like to keep these forums on the GSAP topic, so we can't help you with that any further then this. 

 

document.querySelector('video').addEventListener("ended", function() {
    onVideoHasEnded()
});

 

Again I would go with the version below, my latest one is just a lot more complicated. This one uses the build in ScrollTrigger tools which makes it a lot more robust. 

 

See the Pen NWeKdYq by mvaneijgen (@mvaneijgen) on CodePen

[kadircakir]

Thank you very much for the taken time and effort.

Hope you have a lovely week ahead.