Jump to content
Search Community

Using GreenSock, with fullPage.js and React

modulareverything test
Moderator Tag

Recommended Posts

Hey everyone,

 

I'm trying to add some animations to my fullPage.js slides. I have a series of slide components, and the desired effect is to trigger a set of animations once the slide is active.

 

From doing some reading, I believe timelines are the best way to handle this, so I'm passing a timeline object to the component and doing the animating from within.

 

The problem is that all of the slides animate as soon as the app loads.

 

Here's a simple recreation of what I'm trying to do, showing pretty much the same code as my real app and having the same undesired effects:

https://codesandbox.io/s/priceless-meitner-17759

 

(I created a Code Sandbox before I realised you prefer CodePen... sorry!)

 

Thanks in advance :)

Link to comment
Share on other sites

32 minutes ago, OSUblake said:

Hi modulareverything,

 

fullPage is not a GSAP product, so this would be a question more for fullPage support. I'm assuming you might need to tap into their callbacks.

https://github.com/alvarotrigo/fullPage.js#callbacks

 

 

 

Thanks for the reply OSUblake. I think I'm a bit stuck in the middle here, as I suspect fullPage.js would tell me that GreenSock is not part of their platform and therefore they won't provide support.

 

I'll try asking over there all the same!

Link to comment
Share on other sites

Just now, modulareverything said:

I think I'm a bit stuck in the middle here, as I suspect fullPage.js would tell me that GreenSock is not part of their platform and therefore they won't provide support.

 

You don't have to bring up GSAP. GSAP would run inside an effect, so what's inside that effect is irrelevant as far fullPage is concerned. The question for fullPage support is how do I trigger an effect when my page comes into view?

 

Link to comment
Share on other sites

Thanks OSUblake

 

I think to re-word my original question then... how can I make each slide a part of a timeline, and then progress the timeline to play the animations for that slide using a callback?

 

Edit: As I work through this, what I'm struggling with is how each slide corresponds to a position in the timeline. Each Slide component (there are 6) adds to the main timeline by doing this:

timeline.to(el.current, {
  rotate: 180
});

So if this code is ran 6 times, there should be 6 'positions'(?) chained together. I don't understand how I could say "we're on slide 4, so animate the timeline to position 4 from position 3"

Edited by modulareverything
Progress on what I'm trying
Link to comment
Share on other sites

You can use labels to jump to certain spots of a timeline, but I doubt that is going to work like you are expecting, especially if you want a different animation when the slide leaves.

 

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

 

It would be much better to figure out how to properly call something in your Slide component when the slide changes. This works, but it seems like there should be a much better way to do this within their API, but I don't have the time to go through all their documentation to figure it out. 

 

https://codesandbox.io/s/pedantic-dijkstra-edvrb?file=/src/App.js

 

 

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