HiLuLiT Posted November 4, 2020 Share Posted November 4, 2020 Hey all, I'm trying to build an image gallery - I want to scroll fixed images and I want the related text to scroll with it to. I built this demo on codepen, I have 3 main elements: image, indiactor, and article. In the demo i'm able to change pictures, text and the Indicators change too (color change from grey to yellow). But how do I make the text scroll on top of the background image? everything fades together with the background and I wasn't able to solve this... Does anyone have any idea? Thanks for the help! See the Pen bGejGPQ by HiLuLiT (@HiLuLiT) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 4, 2020 Share Posted November 4, 2020 Hey HiLuLiT and welcome to the GreenSock forums. I've read your post a few times and I still can't understand what you're trying to do. Can you please try to explain how the demo isn't working the way that you want it to? Link to comment Share on other sites More sharing options...
HiLuLiT Posted November 4, 2020 Author Share Posted November 4, 2020 Hey Zach and thanks for the quick replay... Currently the entire div (class="point") is fading on scroll while I'd like to achieve 2 animations on top of each other: 1. The background image should change with fade out/in (that is already happening) 2. The titles should have a scroll effect on top of the background image without fading, just change color of title according to the current point in viewport. I made a gif animation of what i'm trying to achieve: Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 4, 2020 Share Posted November 4, 2020 I'm a bit confused. The .point elements are not animated at all. The article is but that's because you're telling it to in your tweens. With that being said, the effect that you made in the demo is quite different than the effect that you show in the gif. Did you record that gif based on a website? If so can you share the URL with us? It'd help us help you create the effect more exactly. Most likely it'd be best to create a set timeline with labels in between each section and then use a single ScrollTrigger to go through it. Or to use a library like Hammer.js to detect scrolling and have set animations between each section. Link to comment Share on other sites More sharing options...
HiLuLiT Posted November 4, 2020 Author Share Posted November 4, 2020 Unfortunately I don't have a URL to share, that's the only reference I have.... And now when you mention it - you're right, I didn't notice I wasn't animating .point elements at all... I'll give it another try. As for "set timeline with labels in between each section and then use a single ScrollTrigger to go through it. " - do you have an example for that maybe? i'm sorry i'm a bit new to this library... even a reference to read would be good... Thanks again for all your help Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 4, 2020 Share Posted November 4, 2020 Will this list need to be scrolled through infinitely? That has a significant factor on how you should structure things. Link to comment Share on other sites More sharing options...
HiLuLiT Posted November 4, 2020 Author Share Posted November 4, 2020 You're right, but no - it's for a given amount of points (and always reachable in code through points.length). Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 4, 2020 Share Posted November 4, 2020 My question was unclear: Will the points need to wrap? So if you keep scrolling down will the ones that you've passed already need to show up again? Link to comment Share on other sites More sharing options...
HiLuLiT Posted November 4, 2020 Author Share Posted November 4, 2020 nope EDIT - but if you scroll back up you would expect it to behave the same way, but reversed Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 4, 2020 Share Posted November 4, 2020 There are lots of ways to set it up and lots of little variances that might make one method better than another. Here's one way of doing it: See the Pen KKMBMOL?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
HiLuLiT Posted November 5, 2020 Author Share Posted November 5, 2020 I appreciate your help, I will defiantly try this and show you final animations when done Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now