Jump to content
GreenSock

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

[help] TweenMax + ScrollTo

Recommended Posts

Hello,

first time here :)

 

I'm trying to put together a one-page scroll with a "cube" animation.

Basically I would like to see the red cube falling in some very specific divs during the panels navigation (the grey ones), but I fear that I'm using too many libraries.

 

My reference: https://tv.youtube.com/welcome/

My working draft: http://j-a.it/tic/

 

Any suggestion?

 

Thanks

 

 

EDIT,

uploaded a CodePen.

See the Pen XRVbVG by jj_ (@jj_) on CodePen

Link to post
Share on other sites

HI JJ_,

 

Welcome to the forums!

 

Do you think you could elaborate a bit more as to what you are after and what is it that you are struggling with? I did look at both of the links you sent but could not wrap my head around to the effect you're trying to achieve. I did see that you have the red cube moving on a certain scroll points in the link version of your test.

 

If your issues is too many libraries... Get rid of them all. Then, only add the ones you know what they do. ;)

 

 

Link to post
Share on other sites

Hi Dipscom,

I'm trying to use the ScrollTo function and force the red cube upon the grey ones during the scroll, with xPercentage.

I know what the libraries are doing in the page, but maybe I could use some optimization.

Link to post
Share on other sites

I've just had a closer look at the code and erm.... It's a lot of code there, mate. 3,000 lines.

 

It would be a lot easier to debug if you tried to just have the JavaScript that is relevant to the animation that you are trying to achieve.

 

I'm sorry to say but it is not really realistic for us to try and comb over that many lines of code to see what is doing what.

 

Right now I am in the middle of something else, otherwise I'd whip something up for you. If you have the time, set another pen with just the cubes and the scrolling logic. I'm sure others will be able to offer suggestions even if I'm not that free.

Link to post
Share on other sites

Thanks!


Just for clarification: the JS section in CodePen contains the entire fullpage.js script because the CDN wasn't working.

The TweenMax bit is the following:

 

var controller = new ScrollMagic();

new ScrollScene ({
    triggerElement:"#section1",
    duration: 500
  })
.setTween(TweenMax.to("#box", 1, {scrollTo:"#place2", force3D:true}))
  .addTo(controller);		


new ScrollScene ({
    triggerElement:"#section1",
    triggerHook: "onLeave",
    duration: 1000
  })
.setTween(TweenMax.to("#box", 1, {width:400, height:300, force3D:true }))
  .addTo(controller);		
 


new ScrollScene ({
    triggerElement:"#section2",
    duration: 600,
    triggerHook: "onLeave"
  })
 .setTween(TweenMax.to("#box", 1, {force3D:true}))
  .addTo(controller);

 

Link to post
Share on other sites

ok, hang 5, let me have a think.

 

------

 

There is still a good chunk to read over in there. Mostly because I have no idea what this fullpage.js is and how it works. To me it looks like you are trying to align a box to the center os the screen. If that's the case, here a very long read where there's a deep dive and a solution to that problem. Hopefully, it will help you.

 

 

Edited by Dipscom
Update info
  • Like 3
Link to post
Share on other sites

Hi @JJ_ :)

 

Welcome to the GreenSock forum. I completely agree with @Dipscom - that is just too much to look through. A reduced CodePen would be most appreciated. I looked at your pen and noticed a lot of script and 404 errors too.

 

Just an FYI, but you don't need the head and body tags for CodePens. It's also easy to link to scripts by clicking the little gear icon on the JS panel. Once you do that you'll see a drop-down with lots of choices for scripts to add. A little tip I don't think many people are aware of: if you don't see the script you want, just start typing the name and odds are good it will be there. 

 

biaNg54.jpg

Happy tweening.

:)

  • Like 1
Link to post
Share on other sites

Yes, I know but I was in a bit of rush. :D

Anyway, the link that @Dipscom posted perhaps is the solution I was looking for.

 

Thanks!

Link to post
Share on other sites
5 hours ago, Dipscom said:

If that's the case, here a very long read where there's a deep dive and a solution to that problem. Hopefully, it will help you.

 

 

Some parts of that thread really need to be pinned as GSAP Pro-Tips! I'm always referencing it.

Link to post
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.

×