Jump to content
Search Community

Unable to transition from TweenLite.to to Timeline

PropKitty 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! After getting some help and finally understanding how TweenLite.to works and getting some pretty good animation out of it, I was super excited because I wanted to change some of it over to a timeline so I could have delays where I needed them, plus start to figure out how the whole timeline thing works.

 

Basic premise: you hover over a section, edit it, and the save and cancel buttons appear. (Then when you hit save or cancel, everything happens in reverse). I tried to start easy by just trying to make the appearing save button be a time line.

 

You'll see in my codepen that I have tlClickToSaveAnimation.play(); where I want the animation to fire off. 

$(".saveSection").each(function (index, element) {
        var tlClickToSaveAnimation = new TimelineLite();
        var saveSection = $(this).closest(".section").find(".saveSection")[0];
        tlClickToSaveAnimation.to(saveSection, 0.5, { opacity: 1, display: 'block', scale: 1, paused: true }, "ClickToSaveAnimation");
    });

And here is my attempted timeline build. As it currently stands, I'm getting "tlClickToSaveAnimation is not defined". Originally I had it outside of the function for each saveSection, but then 'this' wouldn't be defined and the animation couldn't work. 

 

Am I missing something completely in how animations work? My goal is to get everything into it's own timeline so I can juyst whatever.play("label") so I can call animations how I need, including the delays on the reverses so things disappear in the order I want.

 

Again, thank you all for your help! Everyone's been super helpful in getting this newbie to understand GSAP.

See the Pen PPBzvW by hitokage (@hitokage) on CodePen

Link to comment
Share on other sites

Hello PropKitty,

 

Have a look at this video by GreenSock on sequencing your tweens into a timeline:

 

 

It will be easier for use to just deal with converting regular tween into a sequenced timeline. Right now there is just too much code in their to go through, to isolate your conversion into a timeline.

 

Also I'm sure if you separate your codepen demo to just the tween parts you want to convert to a timeline. We could help you much better and faster.

 

Thanks :)

Link to comment
Share on other sites

Jonathan,

 

I apologize if I'm not quite understanding. My code is all pretty interdependent on each other... I'd like to convert *all* of the Tweenlite.to into timelines so each object had it's own little timeline I could pull animations from. Trying to pull out just a bit is making everything break pretty badly until the point it doesn't even remotely function in the codepen, so I'm not sure what I should pull out? 

$(".saveSection").each(function (index, element) {
        var tlClickToSaveAnimation = new TimelineLite();
        var saveSection = $(this).closest(".section").find(".saveSection")[0];
        tlClickToSaveAnimation.to(saveSection, 0.5, { opacity: 1, display: 'block', scale: 1, paused: true }, "ClickToSaveAnimation");
    });

    /*$(".saveSection").each(function (index, element) {
        var clickToSaveAnimation = TweenLite.to($(this), 0.5, { opacity: 1, display: 'block', scale: 1, paused: true });
        element.clickToSave = clickToSaveAnimation;
        var clickToSaveAnimationReverse = TweenLite.to($(this), 0.5, { opacity: 0, display: 'none', scale: 0.7, delay: .2, paused: true });
        element.clickToSaveReverse = clickToSaveAnimationReverse;
    });*/

This bit here (unless that's what I should be pulling out?) is the original Tweenlite.tos that worked, but I had to make a Reverse and it was awkward since the reverse needed a delay and I thought the whole thing could be better done using Timeline labels.

 

I did in fact watch that video, which got me even as far as I am now, but it doesn't answer my question unfortunately. Given that I need to call the .play inside of something else (I am clicking on edit and the animation happens on another object, the save button) I don't know how to pass the animation 'this' properly so it knows to only play that animation on the save button in the section the edit button I just clicked on is. All of the stuff in this video is based on calling something labeled once in a document and you click on THAT thing and the animation happens to it, not something else. 

Link to comment
Share on other sites

What you could do is use the FORK button on codepen. FORK makes a copy of your codepen. This way you can keep the original the way it is, and just edit the copy forked file. The FORK button is in the top nav in your codepen window.

 

This way you dont have to change your original codepen.. and just modify a copy (forked version)

Link to comment
Share on other sites

The reason forking your original helps.. is because you are changing your original codepen. So when we try to reference the original codepen it has been changed which makes it harder to help you. But if you create a fork (copy) of it then we can still reference the original codepen in your first post above. Thanks for forking another copy of your original. :)

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