Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by uani

  1. This was an issue on my part where I forgot to set undo values for margins and thus received a jump when scrolling upwards with superscrollorama. Sorry!
  2. Thank you! Did you consider this issue for "margin" ("-top") in this fix? It appears not
  3. Thank you! set() in fact cures the ailment. Despite an inheritance, wouldn't the explicit css "left" style set the position? And why does from() work in that it can get the "to"-position from css (and not an overriden parent position)? I let you/gs decide whether GSAP can do something about it. Thank you very much for your investment into my issue and finding a solution! Merry Christmas again
  4. http://codepen.io/anon/pen/zJGIx both now use to(), is this what you wanted?
  5. Hi! thank you! http://codepen.io/anon/pen/IbcHy I noticed you put "x" in place. GSAP takes the % as px though. If I change to px, the issue doesn't exist, so I put % in with "left". I added a #text3: it uses .from(). .from() works! .to() doesn't work. Note I adjusted the origin and dest values a bit, but the path isn't supposed to be the same! You'll see the issue when you *scroll down*. The top text suddenly appears at left: 100% and reverts back to there when scolling up. It should start at and revert to left: 600%. The issue is not dependant on the most-inner vs one less-inner div. As .from() works, I guess it is in fact a GSAP issue.
  6. The reason the transform isn't working is GSAP doesn't support percentage-values for translate and I need them. I have several positions (each belongs to a "scene") and I use .to() to go 0->1->2->3->4->... . I can't achieve this with .from() (after the first .from(), the position is at the initial specified (css) position, subsequent .from()s all animate to that position). Codepen only supports 1 external resource for non-pro members and I need at least 2. Thanks
  7. Hi, thank you for the warm welcome! I penned the code over there, yet I don't know how to add the neccessary libraries, thus the preview doesn't work (it needs jQuery 1.x, Superscrollorama and TweenLite with CSSPlugin). I read about pixel-fitting and didn't see how it could hamper setting the position. Perhaps it is a superscrollorama issue. If you don't conclude anything, I'll ask over there . .from() animates properly! However I can't use it with multiple scenes for one element, I need ".to()". I didn't get css "transform: translateX()" to animate: does TweenLite support it? Happy New Year (btw.: quick reply's JavaScript doesn't work in IE11 Win8.1 !)
  8. 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!