Search the Community

I'am trying to get general idea how to get current value of rotation on a div object using Draggable rotation property. Any help would be appreciated.

So this is a classical processing pipe-line for GPU rendered animations via CSS transform: 1) We start start to animate a block from HTML with, for example, TweenLite.to(x:100... 2) At that moment (very start), what happens internally in browser, is that this block is Repainted to a separate composite layer. 3) This layer (when ready) is pushed to VRAM for fast access and animating. 4) Layer decomposes and clears from VRAM when the browser thinks it must. And as we know this works pretty well! But, Where my problem arises is POINT 2,3. On lower hardware, when the initial repaint happens and layer is pushed to VRAM, there is some 100-200ms LAG. And when the animation it self is 1sec or less, this LAG just kills it: a) first of all there is a kind of a shutter at that moment, secondly.. I start to see the object animation already 30% complete (for ex. if the animation is x from 0 - 100 in sec, I start to see it happening on x=>30), when the layer is ready. The potential solutions: 1) Use will-change or empty transform to fool the browser, to push layer before animating. Well.... will-change is kind of experimental and it might be removed, and does not work on IE. empty transform does't work on chrome any more. And the list goes on. And anyway, at some point the browse might consider destroying the layer (to much idle, etc.). So very unstable. 2) It would make sense to me, to animate an object via transform only when the repaint is finished. Otherwise it will always look crappy. As there are some tips out there http://stackoverflow.com/questions/14578356/how-to-detect-when-an-image-has-finished-rendering-in-the-browser-i-e-painted (i like second answer), how to detect the repaint happend, maybe this can be patched to GSAP? What do u think of all this?

Hello GreenSock Masters! I want to collect and recognized all the plugins out there! If you have unofficial plugin for GSAP please comment it or reply it to this forum thread. My Unofficial Plugin for GSAP https://github.com/WarenGonzaga/AnimateCSSPlugin This is not actually plugin built because I rely on GSAP ease animations and some GSAP related variables. Anyway if you have something to share with go ahead and comment it/reply it! Thanks GreenSock Forum

Hello everybody! I am introducing my effort to clone/mimic the reusable animation from animate.css into greensock version. I am inviting everyone here to contribute to the project I've started on Github! First I would like to thank to the founders and administrators who helped me to understand the difference between animate.css and gsap in terms of animation. GreenSock is the one who has flexible building blocks to create amazing web animation. So yeah! Here we go I am now every masters and new user to contribute to my unofficial plugin! You can find the repo links and demo below! DEMO: http://warengonzaga.github.io/sites/animatecssplugin.html (Underdevelopment) GITHUB REPO: https://github.com/WarenGonzaga/AnimateCSSPlugin (Contribute Today!) OFFICIAL GROUP CHAT: https://tlk.io/animatecssplugin/ OFFICIAL BLOG: http://warengonzaga.com/blog/2016/09/20/animatecssplugin-js-gsap/ (Dead Link wait for further updates) ORIGINAL TOPIC: http://greensock.com/forums/topic/15082-best-way-to-use-gsap-with-animatecss/ Calling for @jonathan, @carl, and also @jack they are the GSAP Legends! Best Regards, Waren Gonzaga

Hey guys please please help to understand THIS on javascript. I am trying to use THIS to select the same selector from parent function. Here's example: function Animate() { console.log("Clicked!"); TweenMax.to("#thing", 1, {onStart: a}); } function a() { console.log("Yeah!"); TweenMax.to(this, 1, {y: "100px"}); } I know this is clever but I want to know how to select the same selector from parent function. Same as THIS.

Hello everyone! I am trying to use GSAP with Animate.css to create flexible animation for banner ads. I know this is possible but I would like to know the best way to use GSAP + Animate.css to improve my coding. I've provided link for codepen! Any suggestion would be great! If you have experience with GSAP + Animate.css please comment here! What is Animate.css? --> a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness. Thanks GSAP Masters! HTML: <div id="circle"></div> CSS: #circle { width: 200px; height: 200px; background: #222; border-radius: 200px; } Javascript: window.onload = init; function init() { TweenMax.set("#circle", {alpha: 0, x: "+=100px", onComplete: a}); } function a() { TweenMax.to("#circle", 1, {delay: 1, alpha: 1, onStart: aa}); TweenMax.to("#circle", 1, {delay: 1.5, onStart: ab}); TweenMax.to("#circle", 1, {delay: 2, onStart: ac}); TweenMax.delayedCall(2, ad); } function aa() { $("#circle").addClass("animated wobble"); } function ab() { $("#circle").css("margin-left","100px"); } function ac() { $("#circle").addClass("animated bounce"); } function ad() { $("#circle").removeClass("animated bounce wobble") }

Hi there! I've tried to find a solution in this forum but I couldn't find the same problem. It makes me even more confused! I want to animate a inline SVG made of path elements only. Safari, Firefox and Chrome don't really react the same way but I could eventually fix that by applying transformOrigin or svgOrigin depending on the browser. I also had to set transform-origin:50% 50% 0px !important; BUT! Safari looks like ignoring this setting as soon as I scale a path. It makes the path to scale from the top left of the SVG element to their original position (scale 1). The GSAP version is 1.19.0 I'm struggling for more than 4h hours especially because this animation is a spinner I use on 3 different location on the website and it doesn't work properly only on one location. Does anyone has an idea? Here is the CSS : path{ fill:#fff; opacity:0; -webkit-transform-origin:50% 50% 0px !important; transform-origin:50% 50% 0px !important; } Here is the JS for one path (every path bug the same) this._elementOrigin = ( this._forceTransformOrigin ? 'transformOrigin' : 'svgOrigin'); var from = {opacity:0, scale: 0.5}; from[this._elementOrigin] = "100% 50%"; this._timelineLeft.fromTo(this._$step1L, hD, from, { opacity:1, scale: 1, force3D: true } ); Here is the SVG <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-37.4 94 670.1 653.9" xml:space="preserve"> <path class="component__icon__spinner--7L" d="M214 494.6c-20.7 0-43.6-1.7-62.8-3.4 -2.6-0.2-4.6-0.4-5.9-0.5 -2-0.2-6.1-0.3-11.2-0.5C88.8 488.7 45 485.6 31.3 474 16.5 461.4-1 404.6 0 372.8c0.4-12.2 3.5-20.5 9.1-24.7 16.5-12.3 81.2-12.2 135.6-10.7 2.8 0.1 5.1 0.1 7 0.2 3.6 0.1 8.9 0 15-0.1 44.5-0.7 93 0.2 106 18.7 12 17.2 15.5 72.2 6.7 105.1 -3.8 14.2-9.6 23.3-17.1 26.8C251.9 493 234.1 494.6 214 494.6zM12.1 352.2l3 4c-1.7 1.3-4.7 5.2-5 17 -1 30.7 16.2 83.3 27.8 93.2 12.9 11 73.7 13 96.6 13.8 5.4 0.2 9.3 0.3 11.6 0.5 1.4 0.1 3.4 0.3 6.1 0.5 21 1.9 85.1 7.7 105.8-2.1 4.6-2.2 8.8-9.4 11.7-20.3 3.8-14.4 5.4-34.9 4.2-54.9 -1.2-19.2-4.8-35.2-9.4-41.8 -11-15.8-69.5-14.9-97.6-14.5 -6.2 0.1-11.6 0.2-15.4 0.1 -1.9 0-4.2-0.1-7-0.2 -75.3-2.1-118.9 0.9-129.4 8.7L12.1 352.2z"/> <path class="component__icon__spinner--7R" d="M381.3 494.6c-20.1 0-38-1.6-48.2-6.4 -7.6-3.5-13.3-12.6-17.1-26.8 -8.8-32.9-5.3-87.9 6.7-105.1 13-18.6 61.5-19.4 106-18.7 6.1 0.1 11.4 0.2 15 0.1 1.8 0 4.2-0.1 7-0.2 103.7-2.8 127 4.2 135.6 10.7 5.6 4.2 8.7 12.5 9.1 24.7 1.1 31.8-16.5 88.5-31.3 101.1 -13.6 11.6-57.5 14.7-102.8 16.2 -5.1 0.2-9.1 0.3-11.2 0.5 -1.3 0.1-3.4 0.3-5.9 0.5C424.9 492.9 401.9 494.6 381.3 494.6zM409.8 347.4c-29.9 0-70.1 1.8-79.1 14.6 -4.6 6.6-8.2 22.7-9.4 41.8 -1.2 20 0.4 40.5 4.2 54.9 2.9 11 7.1 18.2 11.7 20.3 20.7 9.7 84.8 4 105.8 2.1 2.6-0.2 4.7-0.4 6.1-0.5 2.2-0.2 6.2-0.3 11.6-0.5 22.9-0.8 83.8-2.9 96.6-13.8 11.6-9.9 28.8-62.5 27.8-93.2 -0.4-11.8-3.3-15.7-5-17 -10.5-7.8-54.1-10.8-129.4-8.7 -2.8 0.1-5.2 0.1-7 0.2 -3.8 0.1-9.2 0-15.4-0.1C423.1 347.5 416.8 347.4 409.8 347.4z"/> <path class="component__icon__spinner--6L" d="M190.8 509.6c-5.2 0-9.4-0.2-12.1-0.4 -2.8-0.2-6.2-0.5-10.1-0.7 -20.8-1.3-52.2-3.3-65.1-13.9 -17.2-14.1-47.9-48.9-53.8-89.6 -2.8-19.5-4.2-34.9-2-46.9 2.1-11.4 7.3-19.8 17.8-29.2 19.2-17.1 44.3-19.2 110.3-17.2 59.9 1.9 69 8.1 81.1 19.8l1.2 1.1c13.2 12.6 24.2 67.6 25.5 92.1 1.6 29.8-3.2 53.1-14 67.5C258.9 506.3 214.6 509.6 190.8 509.6zM140.9 321c-38 0-55.6 3.6-68.7 15.3l0 0c-16.4 14.6-18.6 25.9-12.6 67.2 5.5 37.7 34.1 70.1 50.2 83.4 10.5 8.6 41.1 10.5 59.4 11.7 4 0.2 7.4 0.5 10.3 0.7 20.3 1.7 73.9-2.1 82.1-13 9.4-12.5 13.5-33.6 12-61 -1.8-33.5-14.6-77.9-22.5-85.4l-1.2-1.1c-9.5-9.1-15.7-15.1-74.5-17C162.3 321.3 150.9 321 140.9 321z"/> <path class="component__icon__spinner--6R" d="M404.5 509.6c-23.8 0-68.2-3.2-78.8-17.4 -10.8-14.4-15.6-37.7-14-67.5 1.4-24.5 12.3-79.5 25.5-92.1l1.2-1.1c12.1-11.7 21.3-17.9 81.1-19.8 65.9-2.1 91.1 0.1 110.3 17.2l0 0c20.3 18.1 21.8 34.9 15.8 76.1 -5.9 40.7-36.6 75.5-53.8 89.6 -13 10.7-44.4 12.6-65.1 13.9 -3.9 0.2-7.3 0.5-10.1 0.7C413.9 509.4 409.7 509.6 404.5 509.6zM454.4 321c-10 0-21.4 0.2-34.6 0.7 -58.8 1.9-65.1 7.9-74.5 17l-1.2 1.1c-7.8 7.5-20.6 51.9-22.5 85.4 -1.5 27.4 2.6 48.5 12 61 8.2 10.9 61.8 14.8 82.1 13 2.9-0.2 6.3-0.5 10.3-0.7 18.3-1.1 49-3.1 59.4-11.7 16.1-13.2 44.8-45.6 50.2-83.4 6-41.2 3.8-52.5-12.6-67.2l0 0C510 324.6 492.4 321 454.4 321z"/> <path class="component__icon__spinner--5L" d="M231.6 480.7c-11.4 0-24.1-1.2-36.9-2.7 -3.6-0.4-6.4-0.8-7.9-0.8l-1.8-0.1c-40-1.9-62.2-6.5-69.9-14.4 -9.9-10.2-16.8-32.5-20.1-50.1 -2.1-11.2-5.9-38.3 3.2-47.8 15.7-16.4 53.9-15.4 79.2-14.8 5.1 0.1 9.5 0.2 12.6 0.2h1.7c30.2-0.9 59.9-0.4 72.9 9 9.3 6.7 12.6 30.9 13.6 44.7 1.6 19.8 1.2 56.2-10 67.4C260.9 478.4 247.7 480.7 231.6 480.7zM161.1 359.8c-20.5 0-45.9 1.7-55.7 12 -3.2 3.3-4.4 18.1-0.6 39 3.7 19.9 10.6 38 17.4 44.9 3.2 3.3 15.6 9.1 63.2 11.4l1.8 0.1c1.8 0.1 4.7 0.4 8.6 0.9 15 1.8 54.9 6.4 65.2-3.9 6.2-6.1 9.3-32.3 7.1-59.6 -1.9-23.8-6.7-35.4-9.5-37.4 -12.1-8.7-50.4-7.6-66.8-7.1h-1.7c-3.4 0.1-7.9 0-13.1-0.2C172.5 359.9 167 359.8 161.1 359.8z"/> <path class="component__icon__spinner--5R" d="M363.6 480.7c-16.1 0-29.4-2.3-36.5-9.4 -11.3-11.2-11.6-47.7-10-67.4 1.1-13.8 4.3-38 13.6-44.7 13-9.4 42.7-9.9 72.9-9h1.7c3.1 0.1 7.5 0 12.6-0.2 25.3-0.6 63.5-1.6 79.2 14.8 9.1 9.5 5.3 36.6 3.2 47.8 -3.2 17.5-10.2 39.9-20.1 50.1 -7.7 7.9-29.9 12.5-69.9 14.4l-1.8 0.1c-1.5 0.1-4.3 0.4-7.9 0.8C387.7 479.5 375 480.7 363.6 480.7zM385.2 359.8c-17.9 0-40 1.2-48.6 7.4 -2.8 2-7.6 13.6-9.5 37.4 -2.2 27.3 1 53.4 7.1 59.6 10.4 10.3 50.2 5.6 65.2 3.9 3.9-0.5 6.8-0.8 8.6-0.9l1.8-0.1c47.6-2.3 60.1-8.1 63.2-11.4 6.7-6.9 13.7-25 17.4-44.9 3.8-20.9 2.6-35.7-0.6-39l0 0c-12.6-13.2-51.1-12.2-71.7-11.7 -5.3 0.1-9.8 0.2-13.1 0.2h-1.7C398.7 360 392.3 359.8 385.2 359.8z"/> <path class="component__icon__spinner--4L" d="M207.9 470.8c-18 0-41.6-1.6-47.7-9.8 -8.6-11.4-14.3-52.5-10.4-74.4 1.4-7.5 3.7-12.2 7.1-14.4 8-5.2 33.5-8.6 54.6-9.4 17-0.6 47.1-0.2 58.1 9.8 11 10.1 14.8 36.1 13.6 57.4 -0.4 7.7-2.2 26.3-9.7 31.7 -7 5.1-33.8 8.4-56.7 9C214.1 470.7 211.1 470.8 207.9 470.8zM221.7 368.5c-3.2 0-6.5 0.1-9.9 0.2 -25.5 1-46.2 5.1-51.6 8.5l0 0c-0.9 0.6-3 2.7-4.4 10.4 -3.7 20.4 1.5 59.5 9.3 69.7 3.2 4.2 20.4 8.1 51.7 7.2 27.3-0.8 48.9-4.7 53.3-7.9 3-2.2 6.4-11.4 7.3-27.2 1.1-19.9-2.6-44.3-11.7-52.7C259.6 371.5 243.6 368.5 221.7 368.5z"/> <path class="component__icon__spinner--4R" d="M387.4 470.8c-3.2 0-6.2-0.1-8.9-0.1 -22.9-0.6-49.7-3.9-56.7-9 -7.5-5.5-9.3-24-9.7-31.7 -1.2-21.3 2.6-47.3 13.6-57.4 10.9-10 41.1-10.4 58.1-9.8 21 0.8 46.5 4.3 54.6 9.4l0 0c3.4 2.2 5.8 6.9 7.1 14.4 4 21.9-1.8 63-10.4 74.4C428.9 469.1 405.4 470.8 387.4 470.8zM373.6 368.5c-21.9 0-38 3-43.9 8.4 -9.1 8.3-12.8 32.8-11.7 52.7 0.9 15.8 4.3 25 7.3 27.2 4.4 3.2 26 7.1 53.3 7.9 31.3 0.9 48.5-3 51.7-7.2 7.7-10.3 12.9-49.4 9.3-69.7 -1.4-7.8-3.6-9.9-4.4-10.4 -5.4-3.4-26.1-7.5-51.6-8.5C380.1 368.6 376.8 368.5 373.6 368.5z"/> <path class="component__icon__spinner--3L" d="M215.2 216.3v7c9.5 0 19.7 3.3 28.2 9 7 4.8 16.2 13.6 20.3 28.7 3.5 12.9 5.2 76.5 4.4 170 -0.7 80.6-2.8 150.4-3.9 156.7 -1.3 5.3-4.6 15.3-12.6 24 -10.5 11.3-25.8 17.1-45.6 17.1 -26.3 0-42.5-11.9-51.4-21.9 -10.2-11.5-16.6-27-16.6-40.6 0-30.4 6.2-283.2 10.8-300.1 4.7-17.3 25.4-37 61.3-42.3 1.6-0.2 3.3-0.4 5.1-0.4L215.2 216.3M215.2 216.3c-2.1 0-4.2 0.1-6.1 0.4 -40.5 6-62 28.9-67 47.4s-11 273.9-11 301.9c0 28 24 69.5 75 69.5s62.5-36 65-46.5c2.5-10.5 8.4-296.9-0.6-329.9C262.3 229.4 235.3 216.3 215.2 216.3L215.2 216.3z"/> <path class="component__icon__spinner--3R" d="M380.1 223.3c1.8 0 3.5 0.1 5.1 0.4 35.9 5.3 56.6 25.1 61.3 42.3 4.6 16.9 10.8 269.6 10.8 300.1 0 13.6-6.4 29.1-16.6 40.6 -8.9 10-25.1 21.9-51.4 21.9 -19.7 0-35.1-5.7-45.6-17.1 -8-8.7-11.4-18.7-12.6-24 -1.1-6.2-3.2-76-3.9-156.7 -0.8-93.5 0.9-157.1 4.4-170 4-14.9 13.3-23.8 20.3-28.5C360.3 226.6 370.6 223.3 380.1 223.3M380.1 216.3c-20.1 0-47.1 13-55.3 42.9 -9 33-3.1 319.4-0.6 329.9 2.5 10.5 14 46.5 65 46.5s75-41.5 75-69.5c0-28-6-283.4-11-301.9s-26.5-41.4-67-47.4C384.2 216.5 382.2 216.3 380.1 216.3L380.1 216.3z"/> <path class="component__icon__spinner--2L" d="M224.7 682.4c-2.7 0-4.4-0.2-4.5-0.3 -0.5-0.1-15-2.1-29.3-11.6 -13.4-8.9-29-26.3-27.9-58.4 0.5-13.9 0.9-40.5 1.4-74.1 0.8-52.6 1.8-124.5 4-187.3 2.6-74.9 6-120.6 10.7-139.6l0 0c3.1-12.9 19.8-50 54.9-51.8 15.3-0.8 27.7 8 35.9 25.4 5.7 12.1 7.3 24.2 7.5 25.2 7.4 50.7 9 358.4 0 416.3 -2.8 17.7-10.5 41-31.9 51.2C237.2 681.7 229.4 682.4 224.7 682.4zM188.8 213.5c-10.2 42-12.8 219-14.4 324.6 -0.5 33.7-0.9 60.4-1.4 74.4 -0.8 22 7.1 38.8 23.5 49.7 12.4 8.3 25 10 25.1 10 1.6 0.2 37.8 4.8 45.9-47.3 8.9-57.5 7.4-363.2 0-413.4v-0.1c-0.1-0.4-5.9-43.4-33-42C205 170.9 190.9 204.5 188.8 213.5L188.8 213.5z"/> <path class="component__icon__spinner--2R" d="M370.6 682.4c-4.7 0-12.5-0.7-20.8-4.7 -21.4-10.2-29.2-33.5-31.9-51.2 -9-57.9-7.4-365.7 0-416.4 0.1-1.1 1.8-13.2 7.5-25.2 8.2-17.4 20.6-26.2 35.9-25.5 35 1.8 51.8 38.8 54.9 51.7 10.4 43 13.1 220.8 14.6 326.9 0.5 33.7 0.9 60.2 1.4 74.1 1.2 32.1-14.5 49.4-27.9 58.4 -14.3 9.6-28.7 11.6-29.4 11.6C374.9 682.2 373.2 682.4 370.6 682.4zM359.5 169.4c-26.1 0-31.6 41.6-31.7 42v0.1c-7.4 50.2-8.9 355.9 0 413.4 3.5 22.3 12.3 37 26.3 43.8 10.1 4.8 19.4 3.6 19.5 3.6 2.1-0.3 50.5-7.5 48.7-59.8 -0.5-14-0.9-40.6-1.4-74.3 -1.6-105.8-4.2-282.7-14.4-324.7 -2.2-8.9-16.3-42.5-45.7-44C360.4 169.4 359.9 169.4 359.5 169.4z"/> <path class="component__icon__spinner--1L" d="M240.7 615.2c-16.7 0-37.3-8.2-48-44.1 -4.1-13.7-0.6-121.2 0.6-153.8 2.4-66.2 6.3-141.3 8.9-149.9 6.2-20.6 24-30.1 37.9-30.1 0.1 0 0.1 0 0.2 0 10.4 0 20.5 4.1 27.7 11.2 6.9 6.8 10.6 16 10.6 25.8 0 4.4 0 20-0.1 41.9 -0.1 74.8-0.3 230.4 0.1 254 0.5 29.4-10.1 43.3-34.3 44.9l0 0C243.1 615.1 241.9 615.2 240.7 615.2zM240.3 243.2c-0.1 0-0.1 0-0.2 0 -11.8 0.1-26.8 8.2-32.1 25.9 -2.1 6.9-6 73.5-8.6 148.4 -3 83.9-3.4 143.5-0.9 151.9 8.3 27.9 23.6 41.3 45.4 39.7l0 0c20.8-1.4 29.1-12.7 28.7-38.8 -0.4-23.8-0.2-179.4-0.1-254.1 0-21.9 0.1-37.4 0.1-41.9 0-8.2-3.2-15.8-8.9-21.5C257.6 246.6 249 243.2 240.3 243.2z"/> <path class="component__icon__spinner--1R" d="M354.6 615.2c-1.2 0-2.4 0-3.6-0.1l0 0c-24.2-1.7-34.8-15.5-34.3-44.9 0.4-23.7 0.2-179.3 0.1-254 0-21.9-0.1-37.5-0.1-41.9 0-9.8 3.8-18.9 10.6-25.8 7.2-7.2 17.3-11.2 27.7-11.2 0.1 0 0.1 0 0.2 0 13.9 0.1 31.7 9.5 37.9 30.1 2.6 8.6 6.5 83.7 8.9 149.9 1.2 32.6 4.7 140.1 0.6 153.8C391.9 606.9 371.3 615.2 354.6 615.2zM351.4 609.1c21.9 1.5 37.1-11.9 45.4-39.7 2.5-8.4 2.2-68.1-0.8-151.9 -2.7-74.9-6.6-141.5-8.6-148.4 -5.4-17.7-20.5-25.9-32.2-25.9 -8.9 0-17.5 3.4-23.6 9.5 -5.7 5.7-8.9 13.3-8.9 21.5 0 4.4 0 20 0.1 41.9 0.1 74.8 0.3 230.4-0.1 254.1C322.2 596.4 330.6 607.6 351.4 609.1L351.4 609.1z"/> </svg>

G'day. My apologies if I haven't done this correctly. Literally my first time on here and presenting a pen. So my issue is this...I am building my webpage, and the portfolio page opens with the navigation bar at the top and social media bar at the bottom (irrelevant for this demo because these animations work), tweening from opacity 0, then my 14 portfolio buttons staggering in from left one by one to array in a 3 x 5 formation: var $Nav = $('Nav'), $socialmedia = $('socialmedia'), $imggal = $('imggal'), tl = new TimelineMax(); tl .from("#Nav", 2, {opacity:0}) .from("#socialmedia", 2, {opacity:0}, 0.5) .staggerFrom("#imggal", 0.5, {x:-2000, ease:Power1.easeOut}, 0.2); )}; However, when I test this timeline, only the top left, or first img, actually animates. The rest are sitting there proudly visible, lazily doing nothing at all. It kind of says that the tween is working, but why the other 13 img boxes aren't is lost on me. I hope this makes sense. Happy to give more details if necessary. Cheers, Adam.

Hi, I created an animation using GSAP and ScrollMagic which is working great, but I can't figure out how to adjust the initial position of the stage/graphics (before the user triggers the animation). Currently, I am calling the .setPin method on a container element with the class of 'stage'. This stage element is inside of a larger parent container (#how-it-works) which is the triggerElement for the animation: var scene = new ScrollMagic.Scene({triggerElement: "#how-it-works", duration: 4000}) .setPin(".stage") .addTo(controller) .setTween(scrollAnimation); The issue I'm having is that the stage element is first seen at the top of the parent container, and I would like for it to just be vertically centered within the parent container prior to the animation being triggered. To get a better idea of what I'm describing, see my codepen at http://codepen.io/BillKroger/pen/bwNXZV (make sure to scroll down) Any help with this is greatly appreciated!

Hi all. I have created a ctags file for TweenMax and wondered if there was any interest from other users before I extended this to other classes (TimelineLite/Max and various plugins). I used a modified source to create the file (ctags doesn't like the way that TweenMax is defined in the original source) and have yet to rigorously test the result, but it seems to be working for me. I have attached the file along with a tags file for Geany. I am apparently not allowed to upload this type of file If someone can suggest a reason/workaround I'd be very grateful. If anyone would like to use it or test and give feedback that would be great Note that currently the path to TweenMax.js is specified as though it is in the same directory as TweenMax.tags

Hi, First I want to say I'm really happy that I'm using GSAP! it's wonderful .. Please check out my Pen ... Here we have 3 sets of elemnts and I want to stagger the 3 of them with a stagger time of sy 0.1s and simultaneously stagger the elemnts inside them .. right now the elements of the second block wont start their animation until the last elemnt of the previous block animates ... so basically I want to stagger 3 blocks of staggering elements, I don't want one block to wait until the previous one is done. and I have to start the whole function with $(".fade-scroll").each( ... so please don't suggest to change that also I dont want to use setTimeout function somehow by getting ".quick-info-item" and ... would be great I'll appreciate it very much if anyone could help me..

Hi - I am trying to troubleshoot some animation stuttering in an app we built. I decided to include GSAP jQuery plugin to see if it would make a difference, but I'm not sure it's even being utilized over jQuery's native animate. How do I know? I include the library: <script src="script/vendor/TweenMax/TweenMax.min.js"></script> <script src="script/vendor/jquery/jquery.gsap.min.js"></script> Then here's a typical animation call: $(obj).stop().animate({ rgb: 127 }, { duration: 2000, easing: (Constants.CUSTOM_EASE ? Constants.EASE : "easeOutQuart"), step: function() { var rgb = ~~ obj.rgb; self.drawArrow(rgb * 65536 + rgb * 256 + rgb); } }); As far as judging performance, is there a good, definitive way to see which is operating faster? I have Chrome Dev Tools FPS counter open, but both platforms seem to operate mostly at 60fps in the counter, with the occasional (severe) dropoff - which is what I'm trying to solve for.

This is my first animation, this works fine locally but when I upload it to the server it doesn't animate and I can't figure out why. Any suggestions on what I did wrong?

Hey there! First time poster here, just got my membership and I'd love to get some help on an animation I'm trying to merge with scrollmagic! I made this little SVG animation of a tree growing using TweenMax and it worked out pretty well. Now I'm trying to integrate it with scrollmagic and I'm having a hard time figuring out what's wrong in the process. I have the 8 different stages (paths) and I wanted them to occur based on scroll position. I have a simple codepenn linked and if anyone could check it out and give me some pointers on what's missing or what needs to be changed in order for the animations to happen. My JS experience is fairly limited but don't go easy on me I'm here to learn! Thanks in advance and have a great day everyone! Kind regards, Bruno

Hi, why doe's isActive() fail after timeline is repeated? And if it's expected behavior with repeat:-1, what's the workaround?

Hello everyone, I would like to start by apologising for the oh so abstract title, my questions vary quite a bit. I recently began working with SVG animations, started with SMIL, continued to Velocity.js, and then found out about GSAP and its great browser support - so here I am. Bearing this in mind, while looking at my Codepen if you guys find anything I did wrong or simply something you would have done differently be it in the SVG, or the GSAP implementation please do not hesitate to mention it. So in the following Codepen that I am currently working on I ran into a few issues: http://codepen.io/anon/pen/WxJQQr?editors=1010 1. On Firefox the cup sections fill up and then return to their original state, for those familiar with SMIL it had the option of fill="freeze" in its animate which would stop the animation at its end state. I am looking for something similar in GSAP - or perhaps something else. 2. On Firefox one of the gear does a proper rotation around the center transform-origin while two of the gears decided to do their own thing. 3. In Internet Explorer, the cup does not even fill up. It doesn't seem to be anything wrong with my linear gradient as the inside of the gears does fill up but has a lower opacity than it should. 4. I ended up solving this with adding a negative delay, but what would be the proper way of starting an animation while another one is still in progress in GSAP? Would it be making a new timeline? (I also solved the issue of infinite repeat by creating a new timeline - is this the right approach?) 5. And a quickie - which combination of TweenLite + extras would I need to maintain this at minimal file size? Any help would be greatly appreciated. Thanks in advance!

I have an animation I'm working on that has 4 elements. Each element on key press needs to animate. I can't figure out the logic to make this happen. I've been able to create my first animation, but am stuck on how to set multiple animations. Also, once I have all my animations working how do I call them on an on key press event? I want to do something very close to this. Here's my animation code. // First Frame Animations var park = new TimelineLite(); park.from(".park", 0.3, {top: -201}) .from(".reverse", 0.3, {top:-201}, "-=0.20") .from(".neutral", 0.3, {top:-201}, "-=0.20") .from(".drive", 0.3, {top:-201}, "-=0.20"); // Second Frame Animations var reverse = new TimelineLite(); reverse .from(".reverse", 0.3, {bottom: 100}) .from(".reverse", 0.3, {bottom: -100}, "-=0.20") .from(".neutral", 0.3, {bottom: 100}, "-=0.20") .from(".drive", 0.3, {bottom: 100}, "-=0.20"); // Third Frame Animations var neutral = new TimelineLite(); neutral .from(".reverse", 0.3, {bottom: 100}) .from(".reverse", 0.3, {bottom: -100}, "-=0.20") .from(".neutral", 0.3, {bottom: 100}, "-=0.20") .from(".drive", 0.3, {bottom: 100}, "-=0.20") // Fourth Frame Animations var drive = new TimelineLite(); drive .from(".reverse", 0.3, {bottom: 100}) .from(".reverse", 0.3, {bottom: -100}, "-=0.20") .from(".neutral", 0.3, {bottom: 100}, "-=0.20") .from(".drive", 0.3, {bottom: 100}, "-=0.20") I also added a graphic if it helps. Little help anyone?

hi, I am trying to tween width and height with TweenMax in Adobe Animate CC: First frame script (in Animate CC): var root = this; // TweenMax.to(root.myBox, 1.25, {scaleX:2.0, scaleY:2.0, ease:Elastic.easeOut}); // --> works // TweenMax.to(root.myBox, 1.25, {width:"500px"}); // --> NOT WORKS TweenMax.to(root.myBox, 1.25, {left:"12px"}); // --> ALSO NOT WORKS ("myBox" is a name of movie clip on stage). Using: Animate CC Version: 15.1.0.210. TweenMax.min.js Version: 1.19.0 (also tried 1.18.2). createjs-2015.11.26.min.js. Thanks.

Hi all, In my codepen attached I have each box randomly positioned, and then I am running a timeline that staggers through from opacity 0, then a left or right movement, then goes to opacity 0 again. At the moment this is staggering through, but what I want is for each box to run as their own timeline and in sequence. So I want the first one to fade in from 0, move it's "cover", then fade out to 0. Then the next one would do that same animation. I attempted to use an each function but couldn't seem to get it to work right. Any solutions? Thanks, Oliver

Hello Everyone, Please help me with advice / best practice for html5 ad development. I have been trying to find some "summ-up post" showing "what goes where", but could not find any, I appologize. My trouble: I convinced the client to move from swf to html5 banners, followed Chris Gannon's example and developed html5 ads for Google AdWords. When uploading the ads data, client got the error: "Uploaded ad includes html5 code we can not approve: script. Please …" The error call is not very helpful for me, I don't see clearly where to fix this. I am using svg file, hosted image, GSAP TweenMax, I followed google image ads guidelines, wrapped svg in html file, then put svg, minified TweenMax.js and html file in *.zip Here is code I use for html wrapper: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="ad.size" content="width=300,height=250"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>IDSYS</title> <style> .banner {position: relative} .banner300x250{width: 300px; height: 250px} .banner120x600 {width: 120px; height: 600px} .banner160x600 {width: 160px; height: 600px} .banner728x90 {width: 728px; height: 90px} </style> </head> <body> <object type="image/svg+xml" data="IDSYS_a300x250.svg" class="banner banner300x250"> <!-- <param id="clickTag" value="www.idsys.cz" /> --> </object> </body> </html> sample zip with SVG, html and js files attached to this post: IDSYS_a300x250.zip If anyone could find some time, please help. Best wishes, kuba

Hi everybody, So I'm playing around the latest GSAP SrollToPlugin and trying to recreate this sample published on the site: http://codepen.io/GreenSock/pen/LkOrKY The issue I occurred is when I click on the navigation, the content will jump back to the top first then do the scroll, I found if I use the <button> instead of <li> then it works just fine. Does anyone knows what cause this issue? Thanks in advance. Here's the code: https://jsfiddle.net/cotyhsu/6rrdt6kw/3/

Help! All my animations worked perfectly before I upgraded my chromium browser to the latest version. They however still work just fine in my Firefox browser. Kindly point out what I am doing wrong. Thanks in advance

Hi. First of all - I welcome me in GSAP community The second thing, that I have a problem with GSAP timeline functionality (check the codepen). Is it a bug? When second timeline is removed, in my opinion, it should not reserve the time for it. Especially not after invalidate(). Any suggestions for workarounds?

Hi, I have a bezier curve generator that generates a bezier curve in terms of x and y coordinates. I want to input that generated bezier curve in the CustomEase GSAP function but I don't know What the values of s, cp, e represent in the CustomEase function. Can you guide me What the values s, cp, e represent in CustomEase and How are they calculated ?