Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
CedGrvl

Timeline and Condition v2

Recommended Posts

I will try to explain my case as simply as possible, but I don't think it's that complex.

 

I have a one page website with several sections.

 

Each section ( all of them) has elements to animate.

 

To access each section, everything is done at the click of a button (pagination, menu, button...)

So I try to start the animations when the section is on the screen

I use a timeline well because it has several elements that come to life in a row.

Then these animations are not the same, depending on the size of the screen (Mobile, Tablet, Desktop for example)

 

I mean, for example, a logo:

 

  • Desktop: from left to right
  • Tablet: top to bottom
  • Mobile: bottom to top

 


 

For more precision, in each section, some elements are animated in an infinite way.

So I should also be able to stop these animations when they are no longer on the screen and restart the animation when they are again on the screen

The logos in each section are not the same, I put a square in my example but it is not the case.

So the animations depend on the size of the screen and the position of the page

 

This is my codepen  

 

  https://codepen.io/CedGrvl/pen/QWWmmqJ

 

 

I managed to get this result, thanks in part to Zach's help.

I didn't put the infinite animations to show where I am.
But for example, it could have been this square that turns infinitely once in place

 

Thx Guys

Ced

 

Share this post


Link to post
Share on other sites

Hey Ced,

 

As I said in the other post, since your users can't scroll normally you shouldn't use most of the scroll position detection that I gave you. You can just fire some some timelines based on which navigation item is clicked. 

See the Pen eYYMwGw by GreenSock (@GreenSock) on CodePen

 

Note that I also used GSAP's scrollTo plugin to give it a smooth scroll to each section, starting the timeline once that section has been reached.

 

Let me know if you have any questions with this approach.

  • Like 2

Share this post


Link to post
Share on other sites

Thank you very much Zach for your feedback.

 

Here the problem is when I rezise the page, config are well modified, I checked, but the timeline remains the same 

 

I mean if I'm on desktop and I switch to tablet without refresh, I still have the desktop timeline

 

I'm trying to figure it out.

Share this post


Link to post
Share on other sites
57 minutes ago, CedGrvl said:

Here the problem is when I rezise the page, config are well modified, I checked, but the timeline remains the same 

 

I mean if I'm on desktop and I switch to tablet without refresh, I still have the desktop timeline

Yep. You just have to refresh the timelines if you want them to update after the resize.

 

See the Pen KKKRKmG?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×