Search the Community

Hello good People! I have an issue with (apparently)`transform:rotate()` css in an animation where i use ScrollMagic which uses GSAP 2.x I can't reproduce exactly this on CodePen, yet can't add the 2.x version gsap js. Here is the current dev site: https://legopd22.iwanwilaga.com/ Please check the robot animation on scroll (with orange background) especially on iOS / apple devices. So it breaks on my old iphone6. Other android phone and desktop doing well on any browser i checked. Do you have hints please why this happens? I applied these css but didn't fix it. transform-origin:center!important; transform-box:fill-box!important; Using TweenMax(). and nested timelines function SVG_Vernie_Robot_Anim(){ let ctrl = new ScrollMagic.Controller(); var timeline_robot_inner_elements = new TimelineLite(); var timeline_robot_slide = new TimelineLite(); var timeline_master = new TimelineLite(); var robot = document.querySelector("svg#robot-vernie"); var robot_head = document.querySelector("g#Head_Vernie"); var robot_eyebrow_left = document.querySelector("g#Eyebrow_Left"); var robot_eyebrow_right = document.querySelector("g#Eyebrow_Right"); timeline_robot_slide .add(TweenMax.to(robot, 1, {transform:`translateX(${is_mobile ? 100 : 250}px) translateY(${is_mobile ? 25 : 0}px) rotate(-10deg) scale(1.5)`},0)) .add(TweenMax.to(robot_head, 1, {transform:'rotate(15deg)'},0)) ; timeline_robot_inner_elements .add(TweenMax.to(robot_eyebrow_left, 1, {transform:'rotate(-25deg)'},1)) .add(TweenMax.to(robot_eyebrow_right, 1, {transform:'rotate(25deg)'},1)) ; timeline_master .add(timeline_robot_slide,0) .add(timeline_robot_inner_elements,2) ; new ScrollMagic.Scene({ triggerElement: ".wp-block-getwid-section.szekcio-terkep", duration: 200, //px }) .setTween(timeline_master) .addTo(ctrl); } SVG_Vernie_Robot_Anim(); To me seems the problem is with rotation. Other `translate` properties work ok. Can you reproduce the same issue? Thank you so much! Best, Wiktor

Working on an app where users can position an SVG on the "stage" and pick an "IN" animation. Uses a from tween that starts offstage and ends wherever the user has positioned the SVG. I pulled the stage setup, some of the code and a few buttons as well as a preselected "already-added" SVG to the Codepen. There's a master timeline and each SVG becomes an element defined in a new svgObject containing its own timelines for animation onto the stage (the "IN" timeline), animation while on the stage (the "ONSTAGE" timeline) and animation off the stage (the "OUT" timeline). There can be multiple SVGs and each can have it's own tweens as well as start and end times, positions, etc for each of the 3 timelines. Kind of like this... Right now, I'm just trying to figure out how to dynamically change the "IN" tween if the user clicks a different "IN" option button. Also, trying to figure out how to properly pass new vars like ease changes. My thought was to overwrite the "in" tween and "in" timeline every time a new "in" option is chosen and to do the same for the out tween and timeline. (The onstage timeline might contain multiple options where I'll need to give the user the option to add/chain new vars and tweens) I must not understand the overwrite var and I also must not understand invalidate. I added... overwrite:'all',onOverwrite:overwrittenTween ... to the tweens but the overwrittenTween function is never running. I'm doing this at the end of each "IN" tween button click listener function... var theTweens = masterTL.getChildren(); console.log("theTweens",theTweens); ... (masterTL is the master timeline), and the tweens are all still there and growing with each click of a new "in" tween option. Also, trying to change the ease is not working as I thought it was supposed to. When I add a new ease like this: activeSVG.twIn.vars.ease = newEase; activeSVG.twIn.seek(0).invalidate(); The tween seems to break. As hinted at above, for each SVG, there's an object structured like this... var newSVG = (function() { var SVG = { el: $('#svg-0'), // the SVG itself id: "0", gp: $('#gp-0'), // there's a group that wraps each SVG with the same id# rotating: null, // GSAP Draggable object dragging: null, // GSAP Draggable object resizing: null, // GSAP Draggable object tlIn: new TimelineMax(), // in timeline twIn: null, // in tween tlStage: new TimelineMax(), // onstage timeline twStage: null, // onstage tween tlOut: new TimelineMax(), // out timeline twOut: null // out tween } return SVG; }); ... so I can set all the in/out/stage timelines and tweens for each object there. I bet I'm missing something really obvious.

Hi all, So I have a main timeline, in which there will be delayed callbacks to functions that dynamically create and add timelines to the main timeline. Everything works as intended if played normally. However, when I jump through the timeline using either seek() or progress(), things are not behaving as i would like them to. I created a simple codepen demo to demonstrate my issue: http://codepen.io/cocotard/pen/Lqftu You will need to open up the browser's console to see the log. Now, if played normally, following output is obtained: main timeline started index.html:37 added Child 1 index.html:67 timeline 1 started index.html:52 callback 1 from child1 index.html:45 callback 2 from child1 index.html:45 added Child 2 index.html:77 timeline 2 started index.html:55 callback 1 from child2 index.html:45 callback 2 from child2 index.html:45 main timeline completed However, if I seek to 4s, following output shows: main timeline started index.html:37 added Child 1 index.html:67 added Child 2 index.html:77 main duration: 5 index.html:84 main progress: 0.8 index.html:85 c1 progress: 0 index.html:86 c2 progress: 0 What i expected (and would like to have), instead, is something like this: main timeline started index.html:37 added Child 1 timeline 1 started callback 1 from child1 callback 2 from child1 added Child 2 index.html:77 main duration: 5 index.html:84 main progress: 0.8 index.html:85 c1 progress: 1 index.html:86 c2 progress: 0.5 Notice how child timeline c1 should have been completed and c2 is halfway to completion. I have read other posts about one of the solutions was to make the function return a timeline instead of adding it to the main timeline. However this would not be possible in my case. In my real code, i am obliged to use .addCallBack() on my main timeline because there will be parameters needed to be passed - and the values of those parameters will have to be JIT. I hope I made myself clear. Please do not hesitate to ask for clarifications. Thank you for your help in advance!

Hi, I'm studying the video-tutorial "advanced sequencing - meet the blobs". http://hub.tutsplus.com/tutorials/timelinelite-ultimate-starter-guide-advanced-sequencing--active-10331 by Carl Schooff I want to rebuild it in javascript not AS. in the video at 25'45 I'm stucked with looping through the blobani timeline with insertMultiple and push the created timelines into an array. var blobTweens = new Array(); function createBlobs() { for (var i=0; i<10; i++){ var blob = $("#blob"); var blobani = new TimelineLite(); blobani.insertMultiple([ TweenLite.to(blob, 2, {x:480}), TweenLite.to(blob, 0.5, {y:-250}), TweenLite.to(blob, 0.5, {rotation:360, delay:.1}), TweenLite.to(blob, 0.5, {y:-140, delay:0.5}) ]); blobTweens.push(blobani); or blobTweens = (blobani); } } I can't push the timelines that were created by the for loop into the blobTweens array. can you please help me with the right javascript syntax for this wonderful idea to create multiple objects? thank you for the timeline guide videos and for your answer Michael