[Timeline not animating .from y:30, and only animates opacity]

In the codepen demo below, you can comment out the top 8 lines of JS and uncomment the ones beneath to see how I intend the animations to unfold.  The purple swirl graphic is supposed to animate from y:30 and opacity: 0 as it does on the non-timeline version.

 

When I try to replicate the coding to work with the timeline, everything works, except the swirl graphic stays hidden while it's supposed to be fading from 0 and moving up 30 pixels.  Any idea why this isn't working?  Thanks a lot, this is for a tutorial I intend on releasing tomorrow, but this is snagging me up!

 

(PS: Not yet responsive, just for desktop!)

See the Pen zYYmroe by designcourse (@designcourse) on CodePen

[Invalid scaleY tween of 0 Missing plugin? gsap.registerPlugin()]

I've come across another issue/question -- stagger doesn't seem to be working with this setup (there are 3 spans):

var rule = CSSRulePlugin.getRule("span:after");

gsap.to(rule, {cssRule: {scaleY: 0}, duration: 1, stagger: .5});

They're all animating at the same time

[Invalid scaleY tween of 0 Missing plugin? gsap.registerPlugin()]

Doh, thanks!

[Invalid scaleY tween of 0 Missing plugin? gsap.registerPlugin()]

Hey all,

I'm trying to animate an :after selector with the CSSRulePlugin, but I can't get it to work.  I've linked the codepen, and I've tried adding `gsap.registerPlugin(CSSRulePlugin);' but it still is giving me that error.  I'm sure it's a simple issue, but I've tried forum searching/Google and can't find the solution.

 

Thanks!

See the Pen gOOjeyg by designcourse (@designcourse) on CodePen

[Juicy.. I'm looking forward to making tutorials!]

@GreenSock yep I'm planning on covering both of those.  In fact, tomorrow, I am releasing a TimelineMax tutorial using the previous lesson's project.

 

Ultimately, I want to release a full course using it in serious project(s).

[Juicy.. I'm looking forward to making tutorials!]

12 hours ago, GreenSock said:

Welcome aboard, Gary! The other guys provided some great links to get you going, but I wanted to personally extend an invitation to post any questions you've got here - we love helping folks. This community is one of the best parts of using GreenSock, in my totally biased opinion.

 

And of course let us know when you release any tutorials - we'd love to give them a peek. 

 

Happy tweening!

 

Awesome! I just released one today:

 

I'm planning on covering several more, TimelineMax definitely being next.

 

So far, learning has been a breeze!

[Juicy.. I'm looking forward to making tutorials!]

I'm not sure why it took me so long to join, a lot of people on my YouTube chan (@DesignCourse, nearing 300k subs!) have requested GSAP content.  The greatest UI animations I've seen almost always revolve around GSAP. Hopefully I will pick it up quickly!

 

Edit: I'm going to start learning asap, but if anyone has some recommendations in terms of courses/existing tutorials, let me know. Thanks.