Search the Community
Showing results for tags '100%'.
Found 2 results
-
Sorry Im a new user of greensock . I want to achieve a 100% screenHeight scroll whenever user scroll until the trigger : ================================================================================ var tween7b = TweenMax.fromTo('#red2', 1, {y: "100%"}, {y: "0%", backgroundColor:'#C74A00', ease: Linear.easeNone}); var tween7c = TweenMax.to('#red2', 1, {y: "-100%", backgroundColor:'#C74A00', ease: Linear.easeNone}); new ScrollMagic.Scene({triggerElement: "#trigger6e", triggerHook: 0.85}) .setTween(tween7b) .addTo(controller); new ScrollMagic.Scene({triggerElement: "#trigger6e", triggerHook: 0.45}) .setTween(tween7c) .addTo(controller) .addIndicators(); ================================================================================== Sometimes its work, but sometimes it failed. I guess its getting confused because of two TweenMax.fromTo affected the same ID ? how could I achieve what I want then? thankyou before -
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!
