Jump to content
Search Community

GSDevTools and functions (for modular approach)

Yaya test
Moderator Tag

Recommended Posts

Hello fellow gsap fans,

I'm working on a fun motion path and figure it's good time to break out the Club Greensock bennies!

I added GSDevTools.create();  and have been following the tutorial located here.   I assigned IDs, which then show up in the dropdown menu for the sake of testing 1 section of the timeline.  Then, I thought I may as well wrap animations in functions (for the modular approach).  I think I'm 98% there; but I'm referencing older forum threads.
 

  • I've seen the use of gsap.fromTo vs just .to
  • I've seen duration placed with the timeline and in the .fromTo parameters.
  •  


Would you mind checking the way I structured things to be sure I'm on the right track? Here is a function, with some .fromTo code removed, to keep my question as concise as possible:

function logoAnimation() {
let intrologoTl = gsap.timeline({id:"logoanim",paused: true});
gsap.set("#logo-tagline", {autoAlpha:0});

intrologoTl.fromTo("#splash-logo",{
  autoAlpha: 0.85,
  scale: 0.2,
  xPercent: 0.5,
  transformOrigin: "top, center",
  smoothOrigin: false
},{
  autoAlpha: 1,
  scale: 5.0,
  xPercent: 20,
  duration: 0.5
}, 1);

intrologoTl.fromTo("#logo-tagline",{
  fill: "#303d8b"
},{
  fill: "#ffffff",
  duration: 1.5,
  delay: 0.4
}, 1);

intrologoTl.fromTo(".leavesBlue",{
  autoAlpha: 1.0,
  scale: 1.0
},{
  autoAlpha: 0.25,
  scale: 1.0,
  duration: 1
}, 3);

intrologoTl.fromTo(".leavesBlue",{
  scale: 1.0
},{
  scale: 1.2,
  duration: .5,
  delay: 3.0
}, 4);

intrologoTl.fromTo("#icon-hbird",{
  x: 500,
  y: 100,
  autoAlpha: 0.5,
  rotationZ: 25,
  scale: 3
},{
  x: 0,
  y: 0,
  autoAlpha: 1,
  rotationZ: 0,
  scale: 1.0,
  duration: 0.5
}, 4);
  return logoAnimation;
}
function finishLoading() {
 intrologoTl.play();
}


Quick shout-out of appreciation for help over the past 30 days that contributed to this code:

  • I learned the gsap.set toy and how to yoyo thanks to Craig (@PointC)
  • I got the "fill" working and managed to blur an svg thanks to an old thread from Zach (@ZachSaucier). Zach, you also taught me about (not) mixing delays with positions (still refining that),  using pause/play, and adding numbers in the timelines to group and order animations! 
  • @Mikel offered up a creative use of rotation that I hadn't thought of

    Seriously, I am truly grateful.

 

See the Pen rNOOqWy by yayaCreates (@yayaCreates) on CodePen

  • Like 1
Link to comment
Share on other sites

Hey Yaya. Your code is good! One note is that a duration of 0.5 is the default so you could leave that line out if you'd like. 

 

Also note that both .fromTo and relative tweens (.from, .to) are good. A good rule of thumb is to default to relative tweens and use .fromTos when necessary (because relative tweens are easier to work with).

 

6 hours ago, Yaya said:

Seriously, I am truly grateful.

We're happy to help! I'm glad you got your animation working the way you wanted it to work.

  • Thanks 1
Link to comment
Share on other sites

Super! A little perseverance and a great support team.... I have an error but I'll keep tinkering with it. Then, the animations will work and more toys can be added. I appreciate the fast response!

Link to comment
Share on other sites

Hey there, I can't believe that I am still working on this animation over several weeks. Since August 17th, I tweak the code and replace one error for another. This last error says, "master is not defined". That's the latest learning curve where I'm trying to add functions with timelines.  Naturally, the whole animation is out of whack until that's resolved. Hoping to see the light at the end of the tunnel!

See the Pen rNOOqWy?editors=1111 by yayaCreates (@yayaCreates) on CodePen

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