Jump to content
Search Community

Scrolltrigger add extra scroll while scaled before scaling down

kadircakir test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Hey van Eijgen,


Goedemorgen :-D 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() {


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

Link to comment
Share on other sites

Ja ook goeie morgen!


    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"});


Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites



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)



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.


  • Like 1
Link to comment
Share on other sites

  • Solution

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() {


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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...