Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
brewhaha

Control Animation

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Can someone show me how to move an item from left to right. or even diagonally as you scroll into that item in the viewport. 

 

I can manage the basic animations in the Getting Started Tutorial but I can't find help on moving an object FROM LEFT TO RIGHT. 

 

Just a note - I have a long scrolling page. I'm trying to have a simple animation scroll into the viewport as I scroll down to that section of my page. 

 

It's probably simple. I just can't find the right tutorial. Thanks!!!!

Link to comment
Share on other sites

for extra credit. 

 

Can you control the animation by the scroll function. 

 

As you scroll down the element would enter the viewport at the same rate of scroll. And scroll out at the same rate of scroll??

 

THANKS!!!!!!!!

Link to comment
Share on other sites

All the Animation seems to happen at the same time. 

 

How can you pause animation to wait for the user to get to that part of the page. 

 

I have a long scrolling page and all the animation happens as soon as the page loads?

 

sorry for the newbie question. 

 

THANKS!!!!!!

Link to comment
Share on other sites

Hello and Welcome to the GreenSock Forums!

 

So to better help you.. can you please provide a limted

See the Pen by pen (@pen) on CodePen

or jsfiddle example, so we can see your code in context with the HTML, JS, and CSS.

 

Thx.. :)

Link to comment
Share on other sites

hi jonathan,

 

Thanks,

 

I don't have anything to show because I can't quite figure it out.

 

I'm trying to achieve a look like this. 

 

http://goojars.businesscatalyst.com/index.html

 

something that animates with scroll movement as you scroll down. is this possible with GSAP?

 

THANKS

Link to comment
Share on other sites

hello again..

 

GSAP has a ScrollToPlugin, that is very awesome.. link to the Docs:

 

http://api.greensock.com/js/com/greensock/plugins/ScrollToPlugin.html

 

Here is a nice post by Rodrigo with some helpful info and examples on the ScrollToPlugin:

 

http://forums.greensock.com/topic/8053-scrolltop-in-greensock/?view=findpost&p=30899

See the Pen bjLxe by rhernando (@rhernando) on CodePen

See the Pen dLxAJ by rhernando (@rhernando) on CodePen

 

Here is another example made by GreenSock using the ScrollToPlugin

 

See the Pen 85cbd4300fdd217ff69bc4abeb6c7803 by GreenSock (@GreenSock) on CodePen

 

Also here is a plugin that uses GSAP to animate the scrolling called Superscrollorama:

 

http://johnpolacek.github.io/superscrollorama/simpledemo_mobile.html

 

hope this helps some! :)

  • Like 2
Link to comment
Share on other sites

Thanks Jonathan

 

From my experiments with the ScrollTo function, it seems that the ScrollTo command scrolls the page down to where the animation would be happening. Am I wrong about that? That seems to be the way it works. 

 

I have tried and tried with SuperScroll-o-rama but honestly I can't seem to get that plugin working. Superscrollorama is very confusing. 

 

I'm starting to look for another way do to this. 

 

Thanks

Link to comment
Share on other sites

Is it possible to post one of the code experiments you are testing out? .. so we can look at what your doing and then advise on what might be the problem.

 

See the Pen by pen (@pen) on CodePen

or jsfiddle

 

even if its limited it will help in helping you!

 

thank you! :D

Link to comment
Share on other sites

Hi,

 

Actually in terms of animating an element upon scrolling the page or any element with overflow, superscrollorama is the easiest way to do it. You should start by the basics of using the plugin and then go further in terms of complexity. They also offer direct support in their GitHub repository.

 

The "manual way" of animating stuff based on the scroll event that I know is the following:

 

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

 

As you can see is not incredibly simple nor complex, but that way offers less possibilities than superscrollorama and you have to set up everything by hand.

 

One thing that you could do is use the scrollTo plugin to scroll the document to a certain position and using callbacks you could start the elements animations when the scroll is completed or during the scroll.

 

Also as Jonathan said it is a very good practice to post a link to a fiddle or codepen in order to get a better idea of what you're trying to achieve.

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Here is an example pen : http://cdpn.io/iKuBw

 

I can't link the scrollorama JS in to Codepen.  - However, this code is a copy of what I'm looking at. 

 

This is actually copied excerpts of the simpledemo.html from the scrollorama github. When I put this into an editor on my desktop it doesn't work either. 

 

All I want to do is get the "FLY IT" example to work. I'm trying to isolate everything that is associated with   <h2 id="fly-it">Fly It</h2> and make JUST THAT effect work. 

 

So I start the controller js - "$(document).ready(function() {

                                           var controller = $.superscrollorama();
 
add the tween js : controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .250, {css:                                                {right:'1000px'}, ease:Quad.easeInOut}));
 
I copy the HTML into the .html:            <h2 id="fly-it">Fly It</h2>
 
I copy in all the CSS but I'm not sure why I need CSS? GSAP tweens are controlled in the JS tween.to() function.  However, when I delete all the CSS scrollOrama no longer works. So I'm trying to figure out what parts of the CSS I need. - so I add all the CSS associated with "#fly-it"
 
QUESTION #2 (kind of the same question)
 
In the scollorama simpledemo.html - if you move the  <h2 id="fly-it">Fly It</h2> outside of the 
<div id="content-wrapper"> it breaks it. I don't understand why. 
 
 
I know this isn't a scollorama forum but I appreciate your help trying to wrap my head around it. If you prefer not to answer because this isn't the place for it - I get it. 
 
I have a pretty good take on animating tweens in GSAP but I can't get the scollorama integration figured out.
 
Thanks again
 
jason 
Link to comment
Share on other sites

When I take the simple demo and delete EVERYTHING except this:  (assume that all the JS plugins are plugged in and in the right place)

 

See the Pen tybcx by jbrewhaha (@jbrewhaha) on CodePen

 

It works. 

 

But when I copy and paste all that same information into a new editor and save it - IT DOESN"T WORK! 

 

Thanks - It's driving me crazy. 

Link to comment
Share on other sites

Hi,

 

There are some syntax issues with your codepen.

 

First you're not including all the libraries (you need a pro account to do that but if my memory doesn't fails it seems there are some workarounds for it). Even if you include the code's you need a version of scrollorama that is not hosted in GitHub (means that you have to upload one to a server and point to that file). One alternative is JSFiddle which allows multiple libraries in the free version.

 

Second, in order to animate positioning properties (top-left-bottom-right), the element must have a position defined (relative, absolute, fixed). In this matter I'd recommend you to always workk with left and top, since right and bottom give issues in some browsers and are more difficult to work with in some scenarios.

 

Finally in this code playground type of sites the <script>, <body>, <head> and other tags are not required you can write your code without them since the result is added in an iframe, which includes all of them.

 

I set up a simple example in JSFiddle:

http://fiddle.jshell.net/4chsh/2/

 

Note that I've uploaded a version of superscrollorama to my server, please use it only for that sample and try to upload one of your own to a server used by you as soon as you can.

 

Also here's a link to the same version that you can use in your local enviroment:

 

https://drive.google.com/file/d/0B-0o-ayjhl3nYVpWbzZwSHA3MGc/edit?usp=sharing

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×