Search the Community
Showing results for tags 'issue'.
Found 27 results
-
Hi, as you can see in the Codepen example, I'm seeing different behaviors when using fromTo() nested in two timelines. First case (work as expected): var t1 = new TimelineMax({paused: true, repeat: 2}); t1 .to("#redBox", 1.5, {x: 300}) .fromTo("#redBox", 1.5, {y: '+=100'}, {x: '+=250', immediateRender: false}, "+=0.5"); Second case (work as expected only once, then from the second iteration it seems to not reset the "from", ignoring "immediateRender = false" config value). var t2 = new TimelineMax({paused: true, repeat: 2}); t2 .to("#blueBox", 1.5, {x: 300}) .add(new TimelineMax().fromTo("#blueBox", 1.5, {y: '+=100'}, {x: '+=250', immediateRender: false}), "+=0.5"); Is there something wrong in my setup or is it a bug? Thanks in advance.
-
Hello, GSAP is a wonderful achievement! In below given code, if you observe the css left property eg in IE11 dev Tools of #text2, you'll notice it jumps to 100% from 600% and only then decreases to 90%. I expected a smooth transition from 600% to 90%. Reversing (using superscrollorama), the 90% increase to 100% and remain there. It appears the initial offsetLeft is not recorded. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>gsap_left_issue</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="jquery.superscrollorama.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/TweenLite.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/plugins/CSSPlugin.min.js"></script> <style type="text/css"> html, body { height: 100%; font-size: 1px; } body { margin: 0; } #timeline { position: absolute; top: 0; right: 0; height: 2500px; width: 100px; } #limiter { position: fixed; height: 100%; width: 100%; overflow: hidden; } #stage { position: relative; max-width: 1920px; height: 100%; margin: auto; } .vwrapper { position: absolute; top: 50%; left: 0; width: 100%; } #stage hr { position: relative; top: 50%; } #timeline hr { margin-top: 100px; } a { display: block; position: absolute; } .vegcontainer /* for everything above screen min-width of 1024px */ { width: 12.64%; float: left; position: relative; } @media screen and (min-width: 1681px) { #vegs { position: absolute; margin-top: -15.65%; left: 22.1%; width: 100%; } } .veg { width: 100%; /* default width of img in container is not 100% ! (default margin is 0) */ /*margin-left: 0;*/ /* > 0 lets (IE11) break line due to margin of img (!) not covered in expanding parent */ } .vegcontainer { opacity: 0; position: relative; } .text { font: 16px "Arial Narrow"; color: grey; position: absolute; } .text h1 { font-size: 32px; } #text2 { font-size: 16rem; width: 20%; top: 15%; left: 600%; } .text h2 { font-size: 28rem; } </style> </head> <body> <div id="timeline"></div> <div id="limiter"> <div id="stage"> <div class="vwrapper"> <div id="vegs"> <div id="veg1" class="vegcontainer"> <img class="veg" width="120" height="400" src="" alt="image" /> <div id="text2" class="text"> <h2>text</h2> <p>text</p> </div> </div> </div> </div> </div> </div> </body> <script type="text/javascript"> var dests = { veg1 : { scenes : [ { css : {opacity: 1}, duration : .3, delay : 350, syncd: 0 }, { css : {left: "19%", ease: "Back.easeOut"}, duration : .3, delay : 750, syncd: 600 } ] }, text2 : { scenes : [ { css : {left: "90%", ease: "Back.easeOut", easeParams: [0.7]}, duration : .3, delay : 750, syncd: 800 } ] } }; var controller = $.superscrollorama({ triggerAtCenter: true, playoutAnimations: true, reverse: true }); function getElem(id) { var elem = document.getElementById(id); return elem; } for(var a in dests) { var b = dests[a].scenes; for(var e=0; e<b.length; e++) { var s = b[e]; var t = TweenLite.to(getElem(a), s.duration, s.css); controller.addTween(s.delay, t, s.syncd); } } </script> </html> Can this be fixed (or is the overflowing offsetLeft somehow not attainable) ? Merry Christmas!
