Do you prefer to watch videos instead of following written tutorials?
Check out my latest uploads on the Ihatetomatoes YouTube channel.
TweenLite and TimelineLite Tutorial
In the following 3 part tutorial series you will learn how to create a simple image slideshow using GreenSock.
Part 1 – Setup HTML, CSS
What you’ll learn:
- How to start your HTML5 project
- How to setup html structure for a full-screen layout
- How to create a full-screen layout with CSS
Part 2 – TweenLite, TimelineLite, Go to Next Slide
What you’ll learn:
- How to use init() function
- How to use TweenLite and TimelineLite
- How to play a timeline on click
Part 3 – TweenLite, TimelineLite, Go to Previous Slide
What you’ll learn:
- How to animate to a previous slide
- How to use .set(), .to(), .fromTo() methods
- How to create an elegant tilt effect
Other GreenSock Learning Resources
- Simple GreenSock Tutorial – Your first steps with GSAP
- GreenSock TimelineLite Tutorial
- GreenSock Workshop – Online course with over 8hrs of GreenSock Tutorials
Share this
Want To Learn More About GreenSock?
Join me in the GreenSock Workshop and learn how to build 3 interactive projects from start to finish.
Download Free Toolkit
All you need to know to get started with GreenSock and ScrollMagic, in one single package. Straight into your inbox.
Hi Petr,
Awesome videos! I’m so excited to check them out.. Hopefully I can make it at weekend. I’ve my first privat project and doing it after work, so I’m a little bit busy at the moment… Of course I’ll be using some animations! 🙂
I wondered how I could trigger some greensock animation on scroll?
If i do something like this, It’ll trigger the animation everytime on scroll, but I want to trigger it only once… Usualy I do things like that with css animations and transitions, but I wanted to try it with greensock…
Here is a little snippet 🙂
$(window).on(‘scroll’, function(){
var scrollTop = $(this).scrollTop();
if (scrollTop > ( $(‘.element’).offset().top – 400) ){
TweenMax.staggerFrom($element, 0.2, {autoAlpha: 0, x: ‘-=100px’}, 0.2);
}
});
Do you have an idea?
Thanks Petr!! 🙂
Hi Norman, you’re right about your snippet it will trigger the animation everytime.
You have a few options, either use ScrollMagic, create a cookie or html5 data attribute and if they exist you won’t trigger the animation again.
ScrollMagic would be probably the easiest to implement, but try cookies or data attributes.
Hope that helps.
Cheers
Petr
Also here’s a quick guide on how to use cookies.