Jump to content
Search Community

Pinning element between tweens

Apnw2 test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hello all,
I'm having difficulties on a ScrollTrigger animation in which I want to add a "delay" between different parts. The problem is that during that delay between tweens, elements are not pinned and are scrolling which is not the effect I'm searching. I don't know what is the best way to keep pinning these elements during this delay.
 

I made a CodePen with my animation to better understanding.

The animation I would like to obtain is while scrolling is the following:
1) the letter "A" appearing from the center of the screen at scale 0 to scale 1
2) the letter "A stay pinned at the center during a "delay 1" time (no tween here)
3) the letter "A" going from scale 1 to scale 10 while disappearing and being pinned at the center of the screen

4) Nothing during a "delay 2" time

5) Then the same steps for the letter "B"

In the CodePen, "delay 1" = "delay 2" for simplicity.
 

I could be so grateful if someone could help me on this problem.
Thanks a lot

See the Pen PoQLNpE by MaxOlliv (@MaxOlliv) on CodePen

Link to comment
Share on other sites

  • Solution

Hello @Apnw2

 

If you want to sequence multiple tweens while the element stays pinned, it would be best to just use a timeline. Now for what you want to achieve, understanding how durations work with scrubbing ScrollTriggers and the position parameter will be key.

 

What I did in the pen below:

  • create a timeline, scrubbing for however long you want things to stay pinned there - I use the scroll_duration variable for that.
  • since you want that second 'delay' where nothing happens at the end, I added an empty tween with the duration set to that mentioned scroll_duration, to make sure that the timeline will span across this exact scroll_duration, even if everything else insidethat tl accumulated would end up being shorter
  • this also makes things very convenient, because now 1 = 1px of scroll, so you could e.g. set a default duration for the tweens inside the timeline. I did set it to 100 - so it would then be 100px - if you didn't set a default, you would have to make sure to set a duration on every tween. because the actual default by GSAP is 0.5 - which in this case would end up being 0.5px then, which you don't want. Now create your tweens for the scale:
     
  • The first tween for the scale starting at 0
  • For the second tween you want it to happen later, so you can just set where to start it via the position parameter - I set it to start at 400 there
     

Now you will have that gap in between the tweens, which here will be 300px between when the first one ends and the second one starts. And also you have that gap after the second tween, which here will be 500px between when that second tween ends and when the whole thing unpins.

 

Also make sure to properly style things, like 1) your .paragraph-wrapper container for the letters to actually be centered in there and 2) for the scaled up letters not to add height (overflow: hidden e.g. on the .content-wrapper) or else you will notice a 'jump' at the unpin.

 

I hope this will help. Happy scrolling!

 

See the Pen GRQejrJ by akapowl (@akapowl) on CodePen

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Wow ! Wow ! Wow ! I'm so amazed by so many things 😮👏🏻

I mean:

  • The quality of your answer @akapowl and the fact it's so detailed, relevant, well explained, and even points out and links to the very elements I was missing. I have so much more to learn.
  • The power of GSAP in general, it's so well thought, engineered, developped and documented.
  • The help this forum gives and the possibility to always have a useful answer for every problem.

I will never be thankful enough for all of this

  • Like 3
Link to comment
Share on other sites

Happy to help :) 


Yeah, GSAP really is incredible - but because it is so well thought through, and thus it includes lots of options for how to tackle things, at times it can be overwhelming. In certain scenarios one approach will work better than another - only, anticipating when to best use which approach mostly comes from experience.

 

And although there are great tutorials and courses out there, unfortunately there just can not be a magic 'learn everything GSAP has to offer and when to use what in just 10 hours' . In the end the learning will come with the doing - and hanging around in the forums every once in a while really helps, too, as you will find lots of condensed examples for certain scenarios.

 

  • Like 2
Link to comment
Share on other sites

27 minutes ago, Apnw2 said:

I will never be thankful enough for all of this

 

Glad to hear you're enjoying the tools and getting good support in here!

 

We're entirely funded from the support of our Club GreenSock members - so if you're ever in a situation where joining is a possibility, it's the best way to say thanks! (Plus you get tons of fun bonus tools to play with) 💚

  • Like 2
Link to comment
Share on other sites

8 minutes ago, Cassie said:

 

Glad to hear you're enjoying the tools and getting good support in here!

 

We're entirely funded from the support of our Club GreenSock members - so if you're ever in a situation where joining is a possibility, it's the best way to say thanks! (Plus you get tons of fun bonus tools to play with) 💚

Good to know, I would be glad to join it when it financially will be more a possibility for me 🙃

  • Thanks 2
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...