Jump to content
Search Community

Scroll ...and other questions about it

julien94270 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

 
Hello all, I have many questions.
 
Please, note I am a true beginner, and I am from France (sorry if my words are not good) :-)
 
1) Let's say I have my website, divided in 3 parts ( red, blue and green).
When my page is loaded, it uses the ScrollToPlugin to jump to the blue part, with an "Ease effect".
Here, everything seems OK, but when I am in the Blue part, I want to trigger an onComplete function ( animYellow ), 
to animate the Yellow square. Nothing happens. What did I forget ?
 
2) Other point : when I use the mouse to scroll in my page, there is no Ease effect ... However, I first use the ScrollTo plugin to go on my blue part. Isn't it enough to always keep the Ease effect in my page?
 
3) More : I want to animate the yellow square when I scroll with the mouse to get into the blue part, and also, I want to animate
the purple square when I scroll to the green part. What is the best way to do it ?
-Create both my yellow square and my purple square at (0,0) , get them invisible, and make them visible (and animate them) when I detect the scroll is in the blue part or in the green part ?
- OR must I position the yellow square at y:800 and the purple one at y:1600 to animate them ?
Which on of these 2 methods is recommend to avoid to slow down my tween effects ?  
 
4) Last question, what is the best way to learn and "masterize" GreenSock Platform ? Online courses ? Or Do you know if, in France, there is any agency providing courses to teach all about GreenSock animations ?
 
Thanks a lot for reading all my topic,
sorry for my bad english, and thank you very much if you can help me :-)
 
Ju
 

See the Pen LEBPxX by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi julien94270  :)

 

your  yellow square , has class="yellow" , not id !

 

pls try this :

 

TweenLite.to(window, 2, {scrollTo:{y:800}, ease:Power2.easeOut, onComplete:animYellow});

function animYellow(){
TweenLite.to(".yellow", 2, {y:800, ease:Bounce.easeIn});
} 

and you can easily use GSAP selector :

 

http://greensock.com/docs/#/HTML5/GSAP/TweenLite/selector/

Link to comment
Share on other sites

Just because you use one scrollTo tween when your page loads, does not mean that all future mouse scrolls will use that tween or that ease.

I think you will find this tutorial interesting: http://bassta.bg/2013/05/smooth-page-scrolling-with-tweenmax/

 

If you want to do a lot of scroll-driven animation, please look into ScrollMagic: 

http://janpaepke.github.io/ScrollMagic/

http://janpaepke.github.io/ScrollMagic/examples/index.html

 

As for becoming a GreenSock master. 

A few tips:

 

  • Read these forums daily. Even if you don't have questions, you can learn a ton from others. You will be exposed to concepts and techniques you won't find anywhere else.
  • Read / watch everything here: http://greensock.com/learning/(start with the getting started guide)
  • Bookmark the documentation and read all sections on TweenLite, TweenMax, CSSPlugin, TimelineLite and TimelineMax http://greensock.com/docs

 

We are going to be releasing an eBook this (late spring / early summer) which included step-by-step instructions for all the exercises we use in our classes.

 

For now, you might want to look at the 02skills program. They cover a lot of topics relating to JavaScript and GSAP: http://02skills.com/course/javascript-animation-bundle/?affcode=ic6i&couponCode=BEST

  • Like 1
Link to comment
Share on other sites

@diaco.aw : Thank you very much ! You are right... It was my mistake with confusion between ID and Class :  shame on me :-)

 

@Carl : I began to have a look to your links. They are really interesting, even if ScrollMagic doesn't seem that easy

to learn for a "beginner" (but may be I am wrong ^^ ). Anyway, thanks a lot, may be it will be my next target, when I become a GreenSock master ;-)

Can't wait your e-book !!

Well, to continue my questions about GreenSock, I update my example :

 

See the Pen PwBQaq by anon (@anon) on CodePen

 

When I click on the Blue button, the page scrolls to the blue page, and then, the Tween (yellow square, on the top of the blue page) is triggered. 

When I click on the Red button, the page scrolls back to the red part.

My question is : 

When I click again on the Blue button, the yellow square tween does not work (because, I guess, the yellow square has already been "tweened" a first time).
So what would be the best solution ?
Re-initialize the position of the yellow square , at the top of the blue page ?
Or tween the yellow square in reverse, when I click on the red button ?

Thanks ! And sorry if my question seems weird :-)
 

Link to comment
Share on other sites

Hi again :)

 

pls try this :

 

use .set() to set the square position on ScrollTween onComplete :

$bt_red.click( function(){
TweenLite.to( window, 2, {scrollTo:{y:0} , ease:Power2.easeOut ,
onComplete:function(){
  TweenMax.set(".yellow", {y:0});
}
});

or .reverse() the tween onStart :

$bt_red.click( function(){
TweenLite.to(window, 2, {scrollTo:{y:0}, ease:Power2.easeOut, onStart:function(){
  anim.reverse() // your yellow square tween should to be defined as global variable
}});
Link to comment
Share on other sites

Thanks a lot Diaco.aw !

It works great !

Just to know, if my "anim" has a duration of 2 secondes, is it possible to have anim.reverse() with a duration of 1 seconde (means "play in reverse more quickly" )  ? Or anim.reverse has to keep the same duration as the "anim" of 2 seconds ?

 

Last question : Do these Tweens (especially with the ScrollToPlugin) work as well on mobiles, without loss of speed ?

(for example, I was told that ScrollMagic is not as good on mobiles, even if it works great on desktop. Is it true ? ) 

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