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.