Jump to content
GreenSock

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

TimelineLite

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

Hi there,

 

I am trying to copy exactly what the animator is achieving in this clip.

 

http://greensock.com/sequence-video

 

I need to create a HTML5 banner ad for a client. Unfortunately, I need a bit more control than just using Tweenlite delays and overlaying different animations. TimelineLite seems to offer the answer that I need and I thought that this tutorial was offering the solution. However, although my banner works as a simple animation as soon as I convert the code similar to that in the tutorial it ceases to work.

 

My code looks like this...

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js"></script>

<script type="text/javascript">
var tl = new TimelineLite();

tl.from("#heading", 1, {left:-280, autoAlpha:0})
 .from("#button", 1, {left:-280, autoAlpha:0})
 .from("#tandc", 1, {autoAlpha:0})
</script>

Do I need to include a <script src= for TimelineLite? Am i missing something really obvious?

 

Thanks in advance,

 

Phil

Link to comment
Share on other sites

You're missing TimelineLite

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TimelineLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/easing/EasePack.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js"></script>
Link to comment
Share on other sites

Hello, phillip_vale, and welcome to the GreenSock Forum!

 

if you go to this page:

 

http://greensock.com/gsap

 

and then on the top white nav bar you will see a green button that says:  DOWNLOAD

 

click that and you can customize the GSAP scripts to your liking :)

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.
×