Leaderboard

You need to create paused timeline outside of events so you can play and reverse it on mouseenter and mouseleave. For gooey effect you need to use blur and contrast trick, check this https://www.youtube.com/watch?v=ZDFwBEXN0pM The ripple effect is SVG filters, feTurbulence specifically, https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence

Glad you found it inspiring, most credit goes to @OSUblake and the book I mentioned. I started participating in forum with the intentions of learning from him, it has been great experience so far. I see that you are being active recently as well, great job! Hope to see you continue do so.

@Sahil @GreenSock Super helpful! Thanks again! Sahil, your CodePens are amazing, inspiring, and very easy to follow, just wanted to give you an extra thanks! I ended up using ticker for the animation I'm working on I posted it on the other thread, but will here as well in case someone stumbles on this.

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

Hi @nickelman, Nice to hear what you can do. It's always better to present a CodePen to see where it's stuck. Just try to integrate the next steps as you wish. Here's a little help: Writing Smarter Animation Code Kind regards Mikel

actually... As long as the symbol at its natural size is the biggest you want it to appear, you can that take that symbol from the library at normal size, place it on the stage, scale it down using the transform tool, and then scale it to a scale of 1 with TweenMax. it will look fine. EDIT: quick video: https://greensock.d.pr/nv2HJb

Nice demo @Sahil. I can't believe you used the word canvas three times in your post and Blake didn't suddenly appear from a cloud of particles. ?

Hi and welcome to the GreenSock forums. Just use the componentDidMount method (careful now with calling them hooks, it can create a bit of a confusion ) and also remember that the CSS Rule needs to be wrapped in the cssRule: {} configuration object: componentDidMount() { console.log( this.button ); const rule = CSSRulePlugin.getRule(".element:before"); console.log( rule ); TweenLite.to( rule, 1, { cssRule: { bottom: 0 }, delay: 1 }); } I know that the norm is to use the refs for to get the DOM node, but keep in mind that pseudo elements are not DOM elements (as far as I know at least but I could be wrong about it), so there is no way to get the pseudo element the react-way soto speak. My advice would be to store the rule in the component's instance (in the constructor method) and when you need to access it just use that reference to check if it exists before using it in a GSAP instance. This sample seems to work: https://stackblitz.com/edit/gsap-react-pseudo-element-tween?file=index.js Hope that it helps you in some way. Happy Tweening!!!

Mikel, hi! During this time I decided to make the animation of the shadow a little different, changing dx and dy of feOffset. Here is: I think it looks nice Honestly, I thought it was not possible, to animate drop-shadow. Thank you for this example! It pushed me to learn more about CSS variables)

Here is the demo.

Yup, Shaun is correct. You can also use call() if you need to pass in parameters to the function you are calling. tl.call(myFunction, ["param1", "param2"]); Check out the docs. Lots of good info: https://greensock.com/docs/#/HTML5/All/TimelineLite/call/

You can use the .add() method to place a function in the timeline where ever you like. .to('.col-box:nth-child(3)', 1, {opacity: 1,delay: 0.2}, 0) .add( function(){ console.log('Woohoo!') } ) .to('.col-box:nth-child(4)', 1, {opacity: 1,delay: 0.3}, 0) .to('.col-box:nth-child(5)', 1, {opacity: 1,delay: 0.4}, 0) http://codepen.io/sgorneau/pen/vgxjQb?editors=1111

Hi tomekpilot You need to add paused:true in your Tween Vars , pls try this : var Anim = TweenMax.to( "#foo" , 1 ,{ ....... , paused:true }) ; $('#play').click( function(){ Anim.play() }) ; pls check this out , same method with Timeline : http://codepen.io/GreenSock/pen/Wbyazp

hello and welcome to the forums GSAP can handle transitions and animation, very well. whether its animating css or attributes or whatever.. As far as your link above, that type of page transitions, which are just basically animating to different div's positioned on the page. Regarding transitioning to urls.. this would be done using Ajax, to pull the content form that url into a div, and then transitioning that urls content in. or using HTML5's history.pushState: // this method takes (state object,page title, url) history.pushState({},"URL Page Title","URL-GOES-HERE"); but it depends if your browser supports it. http://caniuse.com/#search=pushstate Basically GSAP would handle the transitioning and animation, and either Ajax or HTML5's history.pushState would handle and bring in the page without having to reload a different url. Which you would then animate in and out as needed with GSAP. checkout these examples how GSAP handles animating: http://www.greensock.com/js/speed.html http://www.greensock.com/transitions/ http://www.greensock.com/jquery/ http://www.greensock.com/transitions/ http://www.greensock.com/css3/ http://www.greensock.com/get-started-js/ http://codepen.io/GreenSock