Leaderboard

Hi All: The question of using GSAP in WordPress has come up several times over the years, including a couple of questions from me. I finally got around to figuring it out and I wrote a tutorial on how this can be done. If anyone has suggestions or corrections, I'd appreciate passing them along. Hopefully it will be helpful as non-WordPress GSAPers continue to want to use your fantastic library in WordPress. Thanks.

@La Colonia @einomi @Friebel It's not an Uglify issue. It's the create-react-app being really strict. There is a line of ES6 code in TweenLite that is causing the build to bailout, and we'll get that fixed. Note that GSAP is now at version 2.0.0. There's also some new documentation about using npm. https://greensock.com/docs/NPMUsage To get the smallest build possible, I would follow this format for now. Import what you need from "gsap/all", and then put everything you import inside an array so it doesn't get dropped by tree shaking. import { TweenMax, TimelineMax, AttrPlugin, CSSPlugin, Bounce } from "gsap/all"; const activated = [ TweenMax, TimelineMax, AttrPlugin, CSSPlugin, Bounce ]; That will create a bundle that should look like this. Notice how it imports the TweenMaxBase module, which doesn't include any include plugins. @GreenSock this line of code needs to be changed again. And _gsScope should be defined just as window. Leaving _gsScope the way it is now will cause TweenLite to be excluded from the gsap bundle. It will still work, but it won't be optimized for production. export const {Ease, Linear, Power0, Power1, Power2, Power3, Power4, TweenPlugin} = _gsScope;

Hi @soupking I have a lot of posts about displacement mapping, mostly about PixiJS, but it works exactly the same in SVG. However, there is a bug in Chrome that prevents you from using an image for the map, so my demo here is broke. ? SVG documentation is really bad, but MDN does have a little info on <feDisplacementMap>. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDisplacementMap Look at the scale attribute. That controls how much displacement takes place.

Great demo, Craig! Yup, tweenFromTo() can be incredibly helpful. If you want to get totally nuts, you can build a timeline out of tweenFromTo()s for crazy control. *** be sure to use 1.19.0 *** //play red and blue 3 times then play entire timeline var anotherTimeline = new TimelineLite(); anotherTimeline.add(tl.tweenFromTo(0, "startTest", {repeat:3})) .add(tl.tweenFromTo("startTest", tl.duration())); demo: http://codepen.io/GreenSock/pen/akKLYK?editors=0010

regarding svg, take a peak at this demo to see how the AttrPlugin (attribute plugin) can be used to animate blur: http://codepen.io/GreenSock/pen/gpDrC

Hi and welcome to the forums, You're right on using the tweenFromTo() method, the only thing missing is the callback to pause the timeline, something like this: var timeline = new TimelineMax({paused:true}), div1 = $("div#div1"); timeline .to(div1, 1, {autoAlpha:.2}, '00') .to(div1, 1, {scale:2}, '01'); //And now you tween to the specific label div1.mouseenter(function() { timeline.tweenFromTo("00","01"); }); div1.mouseleave(function() { timeline.tweenFromTo("01","00"); }); You can see it working here: http://jsfiddle.net/rhernando/ncX7j/1/ Edit: You should also consider use the tweenTo() method because using tweenFromTo() generates an immediate render, meaning if you leave the mouse before the tween is complete it goes immediately to the label "01" and then goes to the label "00", and if you put the mouse over before the reverse is complete it goes to the label "01" and then reverse to the label "00". Also in order to pause the timeline there is no need for callbacks, the timeline goes to the point indicated and no further. I updated the fiddle and the code. Here's the fiddle using the tweenTo() method: http://jsfiddle.net/rhernando/ncX7j/2/ Sorry for the initial mistake. Hope this helps, Cheers, Rodrigo.