Search the Community

Hi there, Having a bizarre issue with Callback functions within a repeating timeline & I can't seem to resolve it! I'm fairly new to this, but I can't seem to figure out / research what I'm doing incorrectly. What I'm attempting to achieve is this animate div in let it sit for 2 seconds animate div out move onto div with same class rinse / repeat Like I said I'm fairly novice, but I know I need to use a timeline because I'm planning on stopping the animation at some stage. Any direction would be greatly appreciated Cheers! Matt

Is there a shorthand to jump to the end of a TimelineMax (Actually jump to starting point because timeline is running in reverse mode) instance (and fire all of its onComplete listeners) when TimelineMax running in reverse mode ???

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 there, I'm a complete newbie: I animate this logo: https://codepen.io/silverdesk/pen/ORromA The code is a mess, I had to create 6 timelines to do the same. How can I make it a function, I figure StaggerTo() will do it, but I can't find way to chain multiple morphSVG ... Is this possible? Thanks in advance.

Hello there, I'm having a issue with ScrollMagic and I need your assistance. If you scroll down to the section with the guy with glasses you'll see that section gets jittering. What I am doing wrong? Thanks in advance!

Hello, Is it possible to pass $(this) into a timeline so that I can access $(this) as well as the data attributes of an object? In the example pen I'd like to pass data attribute values from buttons into the timeline, ultimately to fade between two images - only after they have each fully loaded. Thanks.

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>

Hi, I'm having an issue using TimelineMax with a loop repeat. The animation works fine but sometimes there's some sort of "flashing" in the animation. It looks like the div inside is repositioned for a millisecond in the wrong place. I cannot understand why this happens and why it happens randomly. I linked a Codepen working example. Any ideas? Thanks!

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.

Hello There. Hows it going? In a banner project I'm working on I see this used where 'tl' is an instance of TimelineMax tl.remove(tl.getChildren()[tl.getChildren().length-1]) Hmmmmm. That is slightly different to the api explanation: .remove().remove( value:* ) : *Removes a tween, timeline, callback, or label (or array of them) from the timeline. Hmm.... Question, what can the previous coder be up to by the first line of code. Can you feed it multiple arguments? Hmmm...not sure where I am, is this the way to the coffe machine? Thankful for reply .t

I know there's a getChildren() method for TimelineMax but I have a situation where I need to check to see if a child timeline has been added to a parent timeline. Would be great if I could do something like getParent() and then check against what I know to be the master timeline - as opposed to getting the children of a master timeline and having to look through it to see if the child is there. I know that every timeline created is added to a global timeline until it gets added to a specific parent timeline so the .timeline property is never empty. Would like to do something like: var tw, tl = new TimelineMax(), masterTL = new TimelineMax(); function doTween() { resetTween(tw); // reset tween function tw = TweenMax.to(element, 1, {x: 0, y:0}); tl.add(tw); var master = tl.getParent(); // THIS IS WHAT I'D LOVE TO SEE! if(!master == masterTL) { masterTL.add(tl); } } Is there a cleaner, better way to accomplish this?

Hey All, The following (attached codepen URL) doesn't work. The only way it works is if I use the TweenMax library. I cannot use that, because the file size is too large(108kb vs 20kb for TimelineMax). <div class="token"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TimelineMax.min.js"></script> <script> var tl = new TimelineMax(); // TimelineMax fires an error. tl.to(".token",1,{x:100,alpha:0}); </script> The above script fires an "Uncaught ReferenceError: TimelineMax is not defined". error Very simple code. Why is timelineMax not working? I've tried downloading the library and running this same code locally too, which is what i would like to do in the final build. No luck. Any help would be much appreciated. Thanks.

From my codepen you can see that hovering any of the parent divs results in my animation slewing across them all. In order to isolate the animation per hovered parent element I could copy paste the code using a unique ID per parent, but that seems very inefficient. Is there a way to write a main script and pass in parameters from each parent div? I'm really new to javascript logic but I could follow along if another post like this has been mentioned before. Thanks. edit: just to clarify, I'm basically wondering how I could refactor my code

I've been using GSAP for a few months now. I'm currently using TweenMax in a project that allows users to set entrance/exit animations for HTML elements. I've written the code that adds each entrance/exit timeline to parent timelines. What I'm wondering, though, is whether there's a way to export all timeline/tween properties to JavaScript Objects or JSON, store the data, and subsequently import the data after reloading the webpage? In theory, this would prevent the need to create each timeline on the fly with each web request. Thanks to anyone who can help me out. I'm currently using TimelineMax together with CSSPlugin.

Is it possible to reverse a master timeline within GSAP? I know you can reverse a timeline that is not nested. Here's the code: // hide copy content divs const hideCopyContentDivsTl = new TimelineMax() hideCopyContentDivsTl.to(copyContentDivs, 1, { height: 0, width: 0, autoAlpha: 0 }) // shrink copy wrapper div const shrinkCopyWrapperTL = new TimelineMax() shrinkCopyWrapperTL.to(copyWrapperDiv, 1, { width: '2%', height: '4%' }) // fade remove bg and change to white const fadeLargeBgImgTl = new TimelineMax() fadeLargeBgImgTl.to(largeImage, 1, { backgroundColor: "#fff" }) // the master timeline to manage the parts const masterTimeline = new TimelineMax({paused: true}) masterTimeline.add(hideCopyContentDivsTl) .add(shrinkCopyWrapperTL) .add(fadeLargeBgImgTl) // assume that there is a mechanism to change the state of playVideo between true and false if (this.state.playVideo === false) { console.log("should play: ", masterTimeline) masterTimeline.play() } else { console.log("should reverse: ", masterTimeline) masterTimeline.reverse() } I can get it to play forwards, just not in reverse. Do I need to tell the browser where to start in the timeline so that it can play in reverse? http://stackoverflow.com/questions/38440731/greensock-animation-platform-is-it-possible-to-reverse-nested-timelines

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 there! I am making a png spritesheet sequence. It is going pretty well but cant quite get a seamless experience as you can see from the Codepen im having a few problems and would love some advice from you Greensock wizards. 1. When the code is loaded the assets are shown for a split second before the code hides them. is there a way to have these assets hidden on load? 2. I am using a quick fade in/fade out between png sequences which seems a bit clunky is there a way to make a more seamless transition. 3. Why is my second PNG sequence half transparent haha?! 4. Bonus points here but I would like for the still image to display until the spritesheets are all loaded. I know its quite a big question but any advice would be appreciated.

Hi - pleasure to meet you all. My first post but have been getting to know GS over the past few weeks and love it. However now I'm getting stuck. I've been trying to figure out how to make responsive SVG timelines - i.e. set SVG timeline "keyframes" in % such that (e.g.) left:100% will always be at screen right, regardless of screen size. Worked my way through your trail here (http://greensock.com/forums/tags/forums/responsive/) but I'm missing something. As a newbie I'm finding some of the examples a little too confusing to work out so I've created an example of what i'm trying to understand .... I'd like to substitute the X & Y values in the codepen for % along the lines of tl.to(cssCircle, 1, {left:100%}) .to(cssCircle, 1, {top:100%}) .to(cssCircle, 1, {left:0}) .to(cssCircle, 1, {top:0}); Many thanks

Hi folks ! I'm stuck with the following code about tl.seek, can't go further from 17 seconds, I have to wait for the animation to complete to see what remains to be animated. It occurs when first "onComplete" starts... I tried to add following functions with "tl.add( percent( ) );", but it becomes messy and doesn't work at all with message : "percent is not a function" in console. That's why all the last parts of the animation are in the percent function. I also wanted to put the animation controllers from Timeline, but can't figure out how to make it properly for the whole timeline without destroying all the stuff... Any help will be welcome, thanks !! (function($){var tl = new TimelineMax(); leaderboard = $('.leaderboard'); tl.add( loadIntro() ) .add( loadContent() ) .add( leaderBoard() ) //here I tried to: .add( percent () ) <<< DISPLAYS "isn't a function in console" //tl.seek(17); //set play cursor <<< DOES NOT WORK AFTER leaderBoard function (as 18 and after) function loadIntro(){ var tl = new TimelineMax({repeat:1, onComplete: loadContent}) otherVars; tl .to(leaderboard,0,{autoAlpha:0}) .etc; return tl; } function loadContent(){ var tl = new TimelineLite() otherVars; tl .staggerFromTo(square, 0.5,{scale: 0.2, ease:Expo.easeOut},{scale: 1.1},0.12) .etc; return tl; } // Main Timeline function leaderBoard(){ var tl = new TimelineLite({onComplete: percent}) otherVars; TweenLite.set(target, {opacity: 0}); etc; tl .staggerTo(target, 0.7, {autoAlpha: 1, scale: 1,delay:0.2}, 0.5) .etc return tl; } function percent(){ var tl = new TimelineLite(), otherVars; function add20() { TweenLite.to(game, 1.4, {autoAlpha:1, score:"+=111", roundProps:"score", onUpdate:updateHandler, ease:Power4.easeNone}) } function add40() { TweenLite.to(game, 1.4, {autoAlpha:1, score:"+=189", roundProps:"score", onUpdate:updateHandler, ease:Power4.easeNone, delay:4.5}) } function add60() { TweenLite.to(game, 1.4, {autoAlpha:1, score:"-=194", roundProps:"score", onUpdate:updateHandler, ease:Power4.easeNone, delay:8.8}) } function add80() { TweenLite.to(game, 1.4, {autoAlpha:1, score:"+=94", roundProps:"score", onUpdate:updateHandler, ease:Power4.easeNone, delay:13}) } function updateHandler() { scoreDisplay.innerHTML = game.score; } add20(); add40(); add60(); add80(); tl .add('percent') .to(jauge, 1.4, {autoAlpha:1, left:0, ease:Power4.easeNone}, 'percent') etc return tl; }; })(jQuery);

Hi all, Trying to animate a line between 2 random points inside a circle using drawSVG. That is the end result i am hoping for. But this is a learning experience so doing it bit by bit. However, i am now stuck. I can make the points appear (currently limited to 2) but would like to animate them in on the pointsTL timeline rather than using the pointer.appendTo("#circle").fadeIn(x);. I put an example in the top left to show what i am trying to achieve but happy for direction to get back on track at the moment in terms of setting up the gsap timeline. Any help is appreciated! Phil

I am new to all this so please forgive any issues or formalities I seem to not follow or understand. I tried putting my stuff in a codepen as requested but it does not work at all when I did so not sure what I did wrong there. i use Google Chrome and Firefox to try and toubleshoot my code but still learning there as well. I am on a MacBook Pro using El Capitan OS. The issue I had was after scene 3 my animations would not work yet the first few scenes worked great. You can see it in action if you like at http://justawebbie.com/centennial/index.html. I am just not sure what I did wrong I went over the code to see if I misplaced a comma or bracket but do not see one thing out of whack. Please and thank you for any help anyone can offer to a newbie.

Hi All, I am new to GSAP and inexperienced with javascript so please bear with me. I am currently trying to make a Go To Top button that follows you down the page and when you click the button it brings you back to the top of the page and so far it has been working.... Unless you want to use it more than once. For some reason, I can't get it to play again after the first click. I have been using timeLineMax and scrollTo to achieve this so far. I have been trying something like this to fix it but no luck so if you can please point me in the right direction. // GO TO TOP BUTTON var goToTopTi = new TimelineMax({paused:true}); goToTopTi.to(window, 1, {scrollTo:{y:0}, ease:Power2.easeOut}); var isPressedGoToTop = 0; document.querySelector("#goToTopButton").addEventListener("click", function(){ if (isPressedGoToTop === 0) { goToTopTi.play().timeScale(1); isPressedGoToTop++; } else { goToTopTi.repeat().timeScale(1); } }); I also tried something similar with no "if" and just goToTopTi.play().timeScale(1); thinking it would simply play each time and no luck with that either. Thanks in advance for all your help, Tech Soul P.S. I am not using jquery on this site for speed reasons in case your thinking the answer is a jquery thing

Hello, I have a problem with Adobe Animate TimelineMax. The problem is that I need to navigate back and forward into the Animate timeline and play the same TimelineMax animations that afect to the same element in and out. in the first frame of animate keyframe I have one button and this: var root = this; root.stop(); root.chk1.visible = 0; root.continuar.visible = 0; function sigue0() { root.play(); } function entrar(vel) { root.boton1.disabled = true; tl0 = new TimelineMax({onComplete:sigue0}); tl0.from(root.boton1,vel,{x:root.boton1.x-150, alpha:0, ease:Back.easeOut},.0); } entrar(1); in the next frame I have this: var root = this; root.stop(); if (this.control == 1) { root.chk1.visible = 1; root.continuar.visible = 1; } function sigue1() { tl1.pause(0).clear(); root.play(); } this.boton1.addEventListener("click", fl_MouseClickHandler1.bind(this)); function fl_MouseClickHandler1() { this.control=1; root.chk1.visible = 0; tl1 = new TimelineMax({onComplete:sigue1}); tl1.to(root.boton1,1,{scaleY:2, scaleX:2,alpha:0},.0); } in the next yhis: var root = this; root.stop(); if (this.control == 1) { root.gotoAndPlay("op1"); } and in the label "op1" I have this: var root = this; root.stop(); this.volver.addEventListener("click", fl_MouseClickHandler1.bind(this)); function fl_MouseClickHandler1() { this.control=1; this.gotoAndPlay(0); } The problem is that the fisrt time I execute this the function "fl_MouseClickHandler1()" wait until every animation is finished and then execute "onComplete" and function "sigue1" but the second time the function "fl_MouseClickHandler1()" is executed it don't wait the animation of the elements and execute "onComplete". How can I fix that? I create elearning courses in Flash the last 10 years and now I want to do the same with animate but i need to navigate back and forward a lot of times in the Animate timeline. Sorry for my english and best regards, Eduardo

revealTL = new TimelineMax({paused: true}); revealTL.from(element, 0.2, {opacity: 0, y: "+=64"}); Hi there, I created a timeline that is paused initially. However the visual attributes of opacity:0 and y position is already applied to my element before the timeline starts. How do I remove that pre-stagging transformation and only have it when I play my timeline? Cheers, Venn.

I have a problem with my current code, it seems to big of a hassle to put in codepen and make it work since it has lots external files so i am only posting the relevant JS code. var tlAddDevices = new TimelineLite(); tlAddDevices.fromTo(desktopHome, devicesTime, {x: -100,y: 100,opacity: 1,display: "block"}, {x: -100,y: 170,opacity: 1,zIndex: -1,},0); tlAddDevices.fromTo(laptopHome, devicesTime, {x: -600,y: 170,opacity: 0,display: "block"}, {x: -420,y: 371,opacity: 1,},0); tlAddDevices.fromTo(tabletHome, devicesTime, {x: -0,y: 170,opacity: 0,display: "block"}, {x: -130,y: 429,opacity: 1,},0); tlAddDevices.fromTo(smartphoneHome, devicesTime, {x: -100,y: 400,opacity: 0,display: "block",zoom: 0.5}, {x: 0,y: 446,opacity: 1,zoom: 1,},0); tlAddDevices.fromTo(bmw1, devicesTime, {x: 0,y: -70,opacity: 1,display: "block",}, {x: 0,y: 0,opacity: 1,},0); var removeDevicesTL = new TimelineMax() removeDevicesTL.to(laptopHome, 2, { opacity: 0, x: 100 },0); removeDevicesTL.to(tabletHome, 1.5, { opacity: 0, x: 100 },1); removeDevicesTL.to(smartphoneHome, 1, { opacity: 0, x: 100 },1.5); var tl3 = new TimelineMax(); var showTextLength = 3; tl3.add("startDekstopSlideshow") .to(bmw2, transitionDuration, { opacity: 1}) .to(bmw3, transitionDuration, { opacity: 1 }) .add("showEIX") .to(iex, transitionDuration, { opacity: 1 }) .add("showWeekendDeals") .to(weekendDeals, transitionDuration, { opacity: 1 }) tl3.add("showDashboard") tl3.to(dashboard, transitionDuration, { opacity: 1 }) .add("end") var tlText = new TimelineMax() .add("Branded-Leads") .to(textSlides[0], transitionDuration, { opacity: 1, y: "+=100" }) .to(textSlides[0], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" }) .set(textSlides[0], { y: "-=100" }) tlText.add("Groot-bereik"); tlText.to(textSlides[1], transitionDuration, { opacity: 1, y: "+=100"}) tlText.to(textSlides[1], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" }) tlText.set(textSlides[1], { y: "-=100" }) tlText.add("Dashboard"); tlText.to(textSlides[2], transitionDuration, { opacity: 1, y: "+=100"}) tlText.to(textSlides[2], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" }) tlText.set(textSlides[2], { y: "-=100" }) tlText.add("Demo"); tlText.to(textSlides[3], transitionDuration, { opacity: 1, y: "+=100" }) //tlText.to(textSlides[3], transitionDuration, { opacity: 0, delay: showTextLength, y: "+=100" }) //tlText.set(textSlides[3], { y: "-=100" }) tlText.add("endText") var mainTimeLine = new TimelineLite() .add(tlAddDevices) .add("set1","+=2") .add(tl3.tweenFromTo("startDekstopSlideshow", "showEIX"),"set1") .add(tlText.tweenFromTo("Branded-leads", "Groot-bereik"),"set1") .add("set2") .add(removeDevicesTL,"set2") .add(tl3.tweenFromTo("showEIX", "showWeekendDeals"),"set2") .add(tlText.tweenFromTo("Groot-bereik", "Dashboard"),"set2") .add("set3") .add(tl3.tweenFromTo("showWeekendDeals", "showDashboard"),"set3") .add(tlText.tweenFromTo("Dashboard", "Demo"),"set3") .add("set4") .add(tl3.tweenFromTo("showDashboard", "end"),"set4") .add(tlText.tweenFromTo("Demo", "endText"),"set4") When i use this code i expected the mainTimeline to play the sets in order but for some reason it seems to start with the last set (set4) and then start properly from set1 all the way to set4 and stop like i expect it to. Maybe i am misunderstanding this. I have all the imgs (iex bmw1 bmw2 etc) opacity set to 0 using css but they instantly appear. I will try later to create a codepen to replicate this but maybe it is possible to see my error via this code? EDIT: Added codepen demo