Imazin

Morning, Rodrigo Thx for your advices and ideas, I'll try N see how it works today!

Oookay! Well, after some tries, I finally found what's interesting to me. By default, each animation has a duration of 0, which means that the animation is played from start to the end immediatly after that the element (any DOM) has reached the starting point of its animation (basicaly, when the element's origin is in the center of the scrollarea). Then, simply specify a duration for the animation and it becomes dependent on the scrolling of the page. Next: I have to find a way that the animation of each of my elements triggers when those elements enter the viewport, not when their origin is in the center of the viewport. Is there a way to do so with SuperScrollorama, by passing some arguments when creating the timeline of an animation? I think I should look about the Offset parameter, but I'm not sure... Thanks!

Hello guys! Thank you very much for your answers. They all work and are viable solutions to my problem. BUT ... as a graphic designer, instead of dispersing me in the intricacies of programming, I would really work on a comprehensive tool that would allow me to perform natively all parallax operations I want and without the need of making homemade solutions to support it. In this sense, SuperScrollorama seems appropriate, thanks to the examples on this page http://johnpolacek.github.io/superscrollorama where the effects from "PIN IT" are all dependent on the scrolling of the page, and this, just from the code needed by SuperScrollorama. My problem is that I can't locate the syntax for this in the source code of the page... This is a part of the HTML code: <div id="examples-pin"> <div id="pin-frame-pin" class="pin-frame"><h2>Pin It</h2></div> <div id="pin-frame-slide" class="pin-frame"><h2>Slide It</h2></div> <div id="pin-frame-wipe" class="pin-frame"><h2>Wipe It</h2></div> <div id="pin-frame-bounce" class="pin-frame"><h2>Bounce It</h2></div> <div id="pin-frame-color" class="pin-frame"><h2>Color It</h2></div> <div id="pin-frame-unpin" class="pin-frame"><h2>Unpin It</h2></div> </div> <div id="examples-2"> <h2 id="fling-it">Fling It</h2> <h2 id="move-it">Move It</h2> </div> <div id="examples-parallax"> <h2 id="parallax-it">Parallax It</h2> <h2 id="parallax-it-left">Parallax It</h2> <h2 id="parallax-it-right">Parallax It</h2> </div> And the JS code who seems to handle the whole thing: // set duration, in pixels scrolled, for pinned element var pinDur = 4000; // create animation timeline for pinned element var pinAnimations = new TimelineLite(); pinAnimations .append(TweenMax.from($('#pin-frame-pin h2'), .5, {css:{marginTop:0}, ease: Quad.easeInOut})) .append([ TweenMax.to($('#pin-frame-slide'), 1, {css:{marginLeft:0}}), TweenMax.to($('#pin-frame-pin'), 1, {css:{marginLeft:'100%'}}) ], .5) .append([ TweenMax.to($('#pin-frame-wipe'), .5, {css:{top:0}}), TweenMax.from($('#pin-frame-wipe h2'), .5, {css:{marginTop:'-600px'}}) ], .5) .append(TweenMax.from($('#pin-frame-bounce'), 5, {css:{marginTop:'-100%'}, ease:Bounce.easeOut}), .5) .append(TweenMax.from($('#pin-frame-color'), .25, {css:{opacity:0}}), .5) .append([ TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'blue'}}), TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'orange'}}) ]) .append([ TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'green'}}), TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'red'}}) ]) .append([ TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'yellow'}}), TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'purple'}}) ]) .append([ TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'orange'}}), TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'blue'}}) ]) .append([ TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'red'}}), TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'green'}}) ]) .append([ TweenMax.to($('#pin-frame-color'), .25, {css:{backgroundColor:'#222438'}}), TweenMax.to($('#pin-frame-color h2'), .25, {css:{color:'#FFB000'}}) ]) .append(TweenMax.to($('#pin-frame-unpin'), .5, {css:{top:'100px'}})); // pin element, use onPin and onUnpin to adjust the height of the element controller.pin($('#examples-pin'), pinDur, { anim:pinAnimations, onPin: function() { $('#examples-pin').css('height','100%'); }, onUnpin: function() { $('#examples-pin').css('height','600px'); } }); The case itself does not interest me. What interests me more is to really understand the syntax required to be able to apply this effect to any project. In short, be independent Any ideas? Thank you, anyway.

Hello everybody! I'm not very comfortable with the notion of beginning from which the animation starts when an element is visible in the page while scrolling. How to handle this easily? When starts exactly the animation of an element once it appears on the screen by scrolling down the page? Going further, I have done some tests with animations where the duration is expressed in seconds once started, but what if I want that the animation of my element be based on the scrolling of the page, in both way, normal and reverse? I try to find answers from http://johnpolacek.github.io/superscrollorama/ and http://www.greensock.com/timelinelite/ but without success... I'm a graphic designer, so be gentle - please - animate through code is pretty lethal to me Oh, and by the way -> GreenSock technology rocks!