dh1 Posted May 4, 2021 Share Posted May 4, 2021 I can't get the wave to be at the top or bottom of the slide, sometimes it's in the middle and its position is not right in relation to the slide (top or bottom). On the very first slide the wave should be at the bottom and then at each change it alternates up and down. The last slide does not have the wave. If I change the slide by the dots with a change of more than one slide (example from 1 to 5) I have the impression that the wave has too much animation to do and that is a problem. I don't see how to solve this problem? See the Pen eYvONWG by dhwe10 (@dhwe10) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted May 4, 2021 Share Posted May 4, 2021 Hiya! Just trying to parse this. Apologies. Are you saying that you don't want the wave to animate between positions? You just want it to move immediately to the top or bottom of the slide? 1 Link to comment Share on other sites More sharing options...
mikel Posted May 4, 2021 Share Posted May 4, 2021 Hey @dh1, Some suggestions for the synchronization of images and wave and scrollTrigger See the Pen oNZvbzW by mikeK (@mikeK) on CodePen Happy tweening ... Mikel Link to comment Share on other sites More sharing options...
dh1 Posted May 4, 2021 Author Share Posted May 4, 2021 Hi, thanks for your feedback, @cassie yes I want animate the wawe between slides positions, or with a delay between naimations : 1) move background image 2) wave rotation with a small delay 3) end of wave rotation, animate content (fadeIn/Out) to get there I went through the event onStart and pass the striperRotate function. Also to have the wave between the background images and the content and avoid putting absolute position on the content I created 2 timeline inside slideAnim function, one in the background with the images and a second one in front with the content, the wave is between two. Because when the wave is down, sometimes I'll have content that goes over it. @mikel With ScrollTrigger the problem is that I don't have a scrollbar in the window so when I tried it didn't work, I'm not sure if it would work and if I would have to use ScrollTrigger I would have to redo the whole code Link to comment Share on other sites More sharing options...
GreenSock Posted May 4, 2021 Share Posted May 4, 2021 I didn't have time to wade through the 300+ lines of JS plus all the CSS, etc. but it sounds to me like you'd just construct things dynamically. So when the user clicks a dot, you've got data that indicates whether the curve should be on the top or bottom, and animate there accordingly (create the tween at that point). No need to have a super long pre-defined timeline for everything combined that you fastforward/rewind. So if they're skipping from the first dot to the 5th, it just does that one animation of the wave to the new position (and of course do whatever other animations you need at that point). If you still need some help, please provide a minimal demo that isolates just the one issue you're struggling with and we'd be happy to take a peek. 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