Jump to content
Search Community

Change css class using scrollTrigger

ToffeyNode test
Moderator Tag

Recommended Posts

Hello Greensock,

 

How do I change the css class or alternatively  manipulate a div when its at a certain point in the screen after I've dragged scrolled on it. I'm trying to recreate the coverflow effect from the old Ipod nanos. I'm sorry this maybe a really silly question but I'm really new to Greensock.

 

image.png.ed26240b2b94cc71282577d664aa49fd.png

 

Cheers!

See the Pen LYQVoyv by ToffeeNode (@ToffeeNode) on CodePen

Link to comment
Share on other sites

Hey there!

 

This sounds like a fun project. Definitely quite ambitious for a first step into GSAP but sometimes that's the best way to learn.

Let's step back a little though. First up - you're including tweenMax, tweenLite and three versions of GSAP3 in this pen. That's basically five different versions of the core GSAP library. Here's a simplified down version of your demo, using the latest version of GSAP, with the head tag removed and scripts added in the JS panel. (see image)

 

image.png

 

See the Pen KKQpjPB?editors=0011 by GreenSock (@GreenSock) on CodePen



 

Next steps!

I'd suggest reading through this getting started article. Start off by making some tweens, build out a timeline, play around a bit and then come back to this challenge when you have some more base knowledge to work with!



In terms of this challenge

I think the best way would likely be to create a timeline and then hook it up to draggable. So to start with I would suggest just creating the animation you're after without hooking it up to scroll or draggable.

You can also log out the x position in a callback - so you could possibly do some maths to work out where the elements are positioned in relation to the viewport.

 

Also. p.s. - Maybe you saw this article/codepen? https://css-tricks.com/going-meta-gsap-the-quest-for-perfect-infinite-scrolling - It's a very in depth article and a little confusing so I wholeheartedly don't suggest starting there - but it might give you some pointers once you've got more comfortable with tweens and timelines and how GSAP works.

  • Like 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...