Animation based on the scrolling of the page

[Imazin]

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!

[Chrysto]

Hi;

 

If you need to know when element enters/leaves the viewport I suggest you using a plugin, like http://static.pixeltango.com/jQuery/Bullseye/ . To animate an element based on scrolling position I suggest you creating an TimelineLite and then getting the scrolling percent and animating the timeline to that percent. View the source of this page to see how did it http://blog.bassta.bg/demos/tweenmax-text-animations/index10.html

 

 

Sorry for the short answer, but don't have much time right now. 

[Rodrigo]

Hi,
 
Superscrollorama does have an option to relate the tween progress based on the scroll position, I'm not a scrollorama expert but if you check the info you'll see it, this is from the official site:

.addTween(target, tween, duration, offset, reverse)

• target: scroll position (number) or element (string or object)
• tween: a Greensock animation tween object
• duration: scroll duration of tween in pixels (0 means autoplay)
• offset: adjust the animation start point
• reverse: disable reverse animation on up scrolling (optional)

 

All you have to do is experiment a little bit with it.

 

Another option is a function that I made some time ago, you can see it here:

http://codeaway.info/parallax-and-scrolling-control-of-tweens-with-greensock-ap-js/

 

But it require a little more coding from your part but it does what you need, the tween progress is based on a starting and end point of the scroll position of any DOM element with an overflow property. It gives you that flexibility but it comes with the cost of more coding, but if you check the tutorial and the samples you'll see that is not a very complicated code to do. 

 

Hope this helps,

Cheers,

Rodrigo.

[Imazin]

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.

[Imazin]

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!

 

[Rodrigo]

Hi,

 

Is good to hear that you're coming along with it.

 

As for the starting point, yes offset would be the way to get that, but you're going to need to estimate that point and for that you have to consider the following.

 

The browser window has an available height that doesn't includes the different bars(bookmarks, apps, etc). Lets say that the user's display is 1400 X 800 (width x height) and the available browser height is 720 px. If you have an object with an offset of 600 px that'll be visible when the scroll position is zero. In that same scenario, if you have an object with an offset of 1500 px from the top, when that objects enters the viewport the scroll position wont be 1501 px, it will be 1501 minus the available height, that means 1501 - 720 = 781 pixels, that's how much the scroll bar has moved from the top, therefore your offset parameter for that element using scrollorama will be that.

 

The way to get that is using jquery's height property associated with the window element and the offset property of the element, like this:

var browserHeight = $(window).height(),//browser's available height
    elementPos = $("#yourElement").offset().top,//element's offset position
    elementTrigger = elementPos - browserHeight;//point at which scrollorama will trigger the tween

Hope this helps,

Cheers,

Rodrigo.

[Imazin]

Morning, Rodrigo

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

[Dong Nguyen]

hi all,

 

I've made a scroll-based animation using TweenLite. It works but there is some issues about performance. Do you have any related experience on this kind of animation, or any advice to make it better?  

 

http://demo.techpush.net/atomic/

 

The main script located at : http://demo.techpush.net/atomic/js/libs/Presenter.js

 

Thanks,

Dong

[Rodrigo]

Hi Dong and welcome to the GreenSock forums.

 

First, really nice site, great job!!.

 

Second, is not easy to debug a live site and you have over 1000 lines of code in your app, so it's hard to point at just one thing.

 

Third, you're using a very old version of the engine (1.11.8  ). There's been very significant improvements on the engine since that version, so I'd recommend you to update it. The current version is 1.15.0, that definitely will help. Also you're using top and left in a lot of your instances, another recommendation would be to change that for x and y, like that GSAP will create a 3D transform matrix in order to pass some of the burden to the GPU, that should smooth things a little bit. Also if you're worried about responsiveness in your app, you can use xPercent and yPercent. Check this blog post to see more about it:

 

http://greensock.com/gsap-1-13-1

 

Also, one thing that really caught my attention by looking the timeline in Chrome dev tools was that you have some really long scripting, that means that there's a lot JS being executed at some giving points, perhaps you could look into that as well.

 

Finally you could check Scroll Magic by Jan Paepke , is a very solid jQuery plugin to build scrollable experiences using GSAP:

 

http://janpaepke.github.io/ScrollMagic/

 

Rodrigo.

[Dong Nguyen]

Thank you so much, Rodrigo

 

I'm also reading somethings arround the concept of "stagger" in TweenMax. With your recommendations, I will update it next week to see how it can be better. 

[sajjadhira]

This is a bit long, I am using this , I think this is so simple 

$(document).ready(function(e) {
var a = 400,
t = 1200,
l = 700,
s = e(".scrool-top");
e(window).scroll(function() {
e(this).scrollTop() > a ? s.addClass("scrool-is-visible") : s.removeClass("scrool-is-visible scrool-fade-out"), e(this).scrollTop() > t && s.addClass("scrool-fade-out")
}), s.on("click", function(a) {
a.preventDefault(), e("body,html").animate({
scrollTop: 0
}, l)
})
})

It's working fine Here, You can say this as demo So why long coding?