Info effect with ScrollTrigger

[Annihilator]

Hi everyone!
I wanted to know if it was possible to achieve this effect with ScrollTrigger, a full-screen zoom of an element to show other elements to the scroll.

I am also attaching the website link for more details on the effect.

 

https://www.metachors.com/

Thank you

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[mvaneijgen]

Seems like something that would be possible. What have you already tried? Would love to see it, so we can easier help you. 

 

As a general tip, the best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.

[Annihilator]

2 hours ago, mvaneijgen said:

Seems like something that would be possible. What have you already tried? Would love to see it, so we can easier help you. 

 

As a general tip, the best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.

thanks for the reply, this is where i am stuck, i would like the text to come out like in the example above.

See the Pen OJZGzmd by Vik85 (@Vik85) on CodePen

[mvaneijgen]

As I said, remove ScrollTrigger and first focus on the animation, this will make it much easier, otherwise you are focusing on two things and you don't know which is doing what. 

 

Most importantly with animation is that your items are at the position you want them to be before animating. So I've copied your .first item multiple times and gave them different content and have them all be stacked in the middle. (I've enabled SCSS btw in your css). And then in the animation loop through these items and animate them two your scale (I've set force3D:false to fix the text blur).

 

I recommend adding ScrollTrigger to the timeline and not to individual tweens. Again, play with the animation (with ScrollTrigger disabled) until you're happy with it and only then enable ScrollTrigger 

 

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

[Annihilator]

1 hour ago, mvaneijgen said:

As I said, remove ScrollTrigger and first focus on the animation, this will make it much easier, otherwise you are focusing on two things and you don't know which is doing what. 

 

Most importantly with animation is that your items are at the position you want them to be before animating. So I've copied your .first item multiple times and gave them different content and have them all be stacked in the middle. (I've enabled SCSS btw in your css). And then in the animation loop through these items and animate them two your scale (I've set force3D:false to fix the text blur).

 

I recommend adding ScrollTrigger to the timeline and not to individual tweens. Again, play with the animation (with ScrollTrigger disabled) until you're happy with it and only then enable ScrollTrigger 

 

 

 

Thank you very much, actually as you suggested starting only with the animation and then the scroll trigger is a good way to not get stuck.

[Annihilator]

18 hours ago, mvaneijgen said:

As I said, remove ScrollTrigger and first focus on the animation, this will make it much easier, otherwise you are focusing on two things and you don't know which is doing what. 

 

Most importantly with animation is that your items are at the position you want them to be before animating. So I've copied your .first item multiple times and gave them different content and have them all be stacked in the middle. (I've enabled SCSS btw in your css). And then in the animation loop through these items and animate them two your scale (I've set force3D:false to fix the text blur).

 

I recommend adding ScrollTrigger to the timeline and not to individual tweens. Again, play with the animation (with ScrollTrigger disabled) until you're happy with it and only then enable ScrollTrigger 

 

 

 

 

hi, I tried to insert scrollTrigger, but at the moment of the scroll "second, thirdy and last section" they are faster than the "first section" at the scroll and I don't have time to see the next element well.

Is there a way to make the scroll last longer?

I tried to increase the overall height or use a longer duration but nothing.
I also tried adding the smoothscroll but the result didn't change (it was smoother but always fast between the various elements).

 

See the Pen OJZGaMm by Vik85 (@Vik85) on CodePen

 

 

 

 

[mvaneijgen]

You can increase the end: value to something larger then it is now (I've set it to 4000px), this will make the animation take longer to complete

 

9 minutes ago, Annihilator said:

but at the moment of the scroll "second, thirdy and last section" they are faster than the "first section" at the scroll and I don't have time to see the next element well.

This is not true, they are all the same. I'm logging out the values at the time of each tween and you can see the first animation is taking 25%, then 50%, 75% and 100% (with some rounding errors), that means they all take the exact amount of time.

 

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

 

What I think you want is have the text come up slower and move faster when it is getting big, this is called an ease. Your original pen had it set to "none", but giving an animation the correct ease can really help it bring to life (which one is the best is personal preference and differs per animation). GSAP has an amazing visual tool that could help you pick the correct one. I would start by looking at the "power" eases and then setting the type to in you can then see what the eases will do. Check out slow or steps, but don't forget to experiment!

 

https://greensock.com/docs/v3/Eases

[Annihilator]

3 hours ago, mvaneijgen said:

You can increase the end: value to something larger then it is now (I've set it to 4000px), this will make the animation take longer to complete

 

This is not true, they are all the same. I'm logging out the values at the time of each tween and you can see the first animation is taking 25%, then 50%, 75% and 100% (with some rounding errors), that means they all take the exact amount of time.

 

What I think you want is have the text come up slower and move faster when it is getting big, this is called an ease. Your original pen had it set to "none", but giving an animation the correct ease can really help it bring to life (which one is the best is personal preference and differs per animation). GSAP has an amazing visual tool that could help you pick the correct one. I would start by looking at the "power" eases and then setting the type to in you can then see what the eases will do. Check out slow or steps, but don't forget to experiment!

 

Thank you very much for the support, I saw that actually the speed is the same thanks to the console log

I also used an ease suitable for my purpose, thanks again