Jump to content
Search Community

Reverse Tweens with Scrollorama

JohnPett 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

Hi there!

 

Having issues with reversing the first tween in my animation. It doesn't seem to do the reverse like all the others.

 

I have just used a simple TweenMax:

controller.addTween('#fade-it1', TweenMax.from( $('#fade-it1'), .5, {css:{opacity: 0}}));

I have also hosted the project here: http://yaocho-digital.com/meadows/

 

Any help would be great!

 

Thanks,

 

JP

Link to comment
Share on other sites

Hi,

 

Mhh it seems ok to me, but the first thing that comes out immediately is that you're using an old version of the engine (1.8) try updating to see what happens. Also the css wrapper is no longer mandatory, the engine detects the property and send the values to the css plugin.

 

Also you could try a fromTo tween and see what happens, like this:

controller.addTween('#fade-it1', TweenMax.fromTo( $('#fade-it1'), .5,{opacity:1}, {opacity: 0}));

By no means I'm an expert in scrollorama, perhaps other user that has more experience could help, but just in case you could use a function I created some time ago just for that particular tween, I haven't tested scrollorama performance with this function but it shouldn't be any conflict. You can see the code here:

http://codeaway.info/parallax-and-scrolling-control-of-tweens-with-greensock-ap-js/

 

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

Did you happen to fix this?

I just looked at your site and the #fade-it1 div that has the text "The story so far" and the accompanying paragraph faded in and out when i scrolled up and down. 

 

Is there a particular browser you are getting odd results on. I tested Chrome and Safari.

Maybe I'm misunderstanding the problem.

Link to comment
Share on other sites

Hi,

 

I was assuming that you meant a div with and id "night", right?, that's the one that has the to tween:

controller.addTween('#night', TweenMax.to( $('#night'), 7, {css:{opacity: 0}}));

That's the only element that doesn't reverse on scroll up.

 

Cheers Rodrigo.

Link to comment
Share on other sites

Yeah, the #night <div> is the only one I can't get to reverse. So annoying, when there doesn't seem to be any obvious syntax changes. I did try the fromTo method, but it doesn't work. This is the same in all browsers I have tested. Please help me!

 

Thanks,

 

JP

Link to comment
Share on other sites

Hi,

 

Like I said in my first post you could use my function to get it working, because is based only in the scroll position to set the progress of a particular tween, so you don't need to set a specific duration in time (by default 1), which could be the problem here.

 

First you need to put this code in your site:

var getVert;

$(window).scroll(function()
{
    getVert = $(this).scrollTop();
    console.log(getVert);
}
With this you''re going to see the scroll position every time you scroll the page up and down, with that you'll figure where you have to put an end to the initial tween, maybe a couple of hundreds before the second tween triggers.

 

Lets assume that the amount is 1200 pixels when the tween ends and 100 pixels when the tween starts, then you have to declare your tween as a variable (highly recommended) and put the math in it and you're done:

var getVert,
    nightTween = new TweenMax.to( $('#night'), 1, {opacity: 0})),
    progressNumber;
 
$(window).scroll(function()
{
    getVert = $(this).scrollTop();
    console.log(getVert);
    function scrollTween(startPoint, endPoint, tweenName);
    {
        progressNumber = (1 / (tn1End - tn1Start)) * (getVert - tn1Start);
    }
    if(progressNumber >= 0 && progressNumber <= 1)
    {
        tweenName.progress(progressNumber);
    }
    scrollTween(100, 1200, nightTween)
}
Like that when you scroll past 100 pixels the tween will start and it will end when you pass the 1200 pixels mark. One last thing remove the console.log() call before final deploy, just in case.

 

If you have any more questions just throw them here or in the blog address of my first post.

 

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

Rodrigo!

 

Thanks for this. I have decided to go for a more lightweight approach and just use your function with JQuery as it seems the Greensock plugin isn't entirely needed here!

 

Thanks again for your help.

 

JP

Link to comment
Share on other sites

Don't mention it, glad to help.

 

One thing that I request is that if you could send me a PM when your site is done indicating me which animations are using the code I proposed, in order to indicate that in the blog as a working sample, is quite important that people see the code going in a real life sample.

 

Cheers,
Rodrigo.

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