need in scroll trigger.

[DineshReddy]

Hi Everyone,

 

I am trying to design a vertical line initially, the line should be displayed hide that touches each point when we scroll. total of 5 points is present in the design. line-height is 800px. each step height is 200.

 

Also, animations are applying still in small and medium devices when the page first time loads. even have mentioned only for large screens

See the Pen xxmxEpQ by Aireddy-DineshReddy (@Aireddy-DineshReddy) on CodePen

[Rodrigo]

Hi,

 

What exactly is the problem here? I read your post a few times and I can't seem to understand whats the issue you are having, please be as specific as you can about the problem you're having and if possible post a link to a website that shows the way this should be working.

 

Maybe the examples in this thread can provide a good starting point:

 

Hopefully this helps.

Happy Tweening!

[DineshReddy]

13 hours ago, Rodrigo said:

Hi,

 

What exactly is the problem here? I read your post a few times and I can't seem to understand whats the issue you are having, please be as specific as you can about the problem you're having and if possible post a link to a website that shows the way this should be working.

 

Maybe the examples in this thread can provide a good starting point:

 

Hopefully this helps.

Happy Tweening!

Hi,

 

This is the website for the sample website https://www.cheatcodedesign.co/ On this website there is a section called design source optimization. I was trying to implement that section using gsap. But having an issue with the vertical line not matching with scroll speed and doesn't support responsive for all screens.

 

Thankyou!

[Sujan]

@DineshReddy for responsive, using gsap match media might be useful to you. 
https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

[DineshReddy]

4 hours ago, Sujan said:

@DineshReddy for responsive, using gsap match media might be useful to you. 
https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

Hi Sujan,

 

I have added gap match media now animation has stopped can you please help me out?

 

 

Thank you.

[Cassie]

You're killing all your animations here with this line. 
 

 mm.revert(); // use if you need to revert all the animations/ScrollTriggers

[Sujan]

@DineshReddy Can you please clear your question and your requirement? Also you've got JS error in your codepen as well.

[DineshReddy]

32 minutes ago, Sujan said:

@DineshReddy Can you please clear your question and your requirement? Also you've got JS error in your codepen as well.

Hi,

 

This is the website for the sample website https://www.cheatcodedesign.co/ On this website there is a section called design source optimization. I was trying to implement that section using gsap. Having an issue with the vertical line not matching with scroll speed and not supporting responsive for all screens.

Thank you!

[Cassie]

You're overcomplicating it a lot! Three pretty solid steps for a scrollTriggered animation.

1) Start by getting the styles correct in the css.

2) Get the animation working without scrollTrigger, makes sure the timing is right, make sure it looks like you want

3) Pop a scrollTrigger on when you're happy with the outcome.

If you use responsive units and approach the animation logically you won't need to worry about different screen sizes.

You're currently trying to animate from 0 to a pixel height but that pixel height will constantly change.
A better approach would be to start from a height of 100% - which is going to be the same no matter the screen size, and animate from a scale of 0, which again, is consistent despite screen size.

So basically - Animate from a scale of 0, stagger the lines so they play one after another, then add scrolltrigger. 

See the Pen GRPJamJ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

[Sujan]

@DineshReddy
Things Corrected in your example:

• removed unwanted transition of step-line
• Added span in the step-count for number animation
• For smaller screen no animation and for greater screen animation.
  
  
  

  See the Pen GRPJzqR?editors=1111 by devSanjay (@devSanjay) on CodePen

  
  
  
  Hope this will help you.