Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Riyas Ahamed

ScrollTrigger Fill CSS color on every Scroll

Recommended Posts

I want to fill css color when user scroll. It's like step by step process 1st time scroll 1st icon need to be blue, 2nd time scroll 2nd icon also need to be blue please give me some tips to make this type of animation please  

logo_Final.png

Link to post
Share on other sites

Hey Riyas.  Here are the steps to create that sort of thing:

  1. Create the layout (probably an SVG for more of it if not all of it).
  2. Create a timeline animation that animates it in the way you're wanting it to animate.
  3. Attach that timeline to a ScrollTrigger and change the configuration values to the ones that you need it to be.

Simple!

  • Like 1
Link to post
Share on other sites

Hello riyas,
 

I was looking at The scrolltrigger demo this morning Which is about 20 mins long and about three mins in (after the demonstrations) there is a nice example where a box is animated when it comes onto the screen.
obviously all your elements are Already on the screen and at the top but...

by extension I think that you could pin the top section and trigger The animations when corresponding trigger elements are scrolled onto the screen.

its worth looking the demo.


Another possibility is here 

 where the progress of a timeline is determined by the scroll position.

 

there are probably more exotic possibilities too that the experts can suggest.

 

  • Like 1
Link to post
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.

×