Jump to content
Search Community

Rotation of an item synchronized with the slides of a one page

dh1 test
Moderator Tag

Recommended Posts

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

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

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

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