Jump to content
GreenSock

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

Very simple scroll animation using Tweenlite

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'm very new here. Sorry if I ask dumb questions. :-)

 

I'm trying to create a simple single web page displaying an animation that works exactly like the blue paper (not the white one) animation featured on this website (which is by the way a very beautiful and creative site). But without the text, images only. I'm not trying to rip this website off, the concept is gonna be completely different. I noticed the creator of this website used Tweenlite but for the moment I'm too unexperienced to build it on my own. Anyone here has got a similar Codepen (or whatever) I could use and modify or some useful tricks for a newbie like me? Would be so great!

 

Thank you so much in advance.

 

Cheers from Belgium!

Link to post
Share on other sites

The blue paper effect is just a series of jpg/png images that are swapped in/out depending on the scroll position, essentially functioning as a user-controlled frame-by-frame animation.

 

I don't have time to dig through the code and see how everything functions, so I can't tell you how it's built or what they are specifically using GSAP for. I would guess that they're probably using some JS to swap out the src of the img element once the scroll position reaches certain points. They could optionally also be using a scroll library to help do that. It does look like the element for the white paper and some of the text elements have some transforms applied to them, perhaps they're using GSAP to handle the animation for those elements.

 

If you're only interested in the blue paper part, I don't see anything here that would require GSAP, though you could certainly use it in various ways.

  • Like 2
  • Thanks 1
Link to post
Share on other sites

Thank you so much for the answer! So maybe they (or he or she) just used JS. So it's off topic now. But I've got one last question: do you know where I could learn how to make such transitions (I mean without any easing, smoothing) with a normal scrollbar? I've searched for it for one month now and I didn't find any Codepen or even the name of this kind of transition ("cut"?)...

 

Thank you again!

Link to post
Share on other sites

Hi @andalltha,

 

Welcome to the GreenSock Forum.

 

There are certainly several ways to achieve the desired.
Here is a version based on intersectionObserver and a concept for the animation of @PointC (

See the Pen aLxmJp?editors=1010 by PointC (@PointC) on CodePen

).

 

See the Pen GLvoxd by mikeK (@mikeK) on CodePen

 

 

More about IntersectionObserver e.g. here

 

Kind regards

Mikel

  • Like 3
  • Thanks 1
Link to post
Share on other sites
  • 10 months later...

Given I come across this thread all the time when searching, here's a simple demo of an animation played on scroll (you're welcome future self):

See the Pen dyoOgYj by GreenSock (@GreenSock) on CodePen

  • Like 1
  • Haha 2
Link to post
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.

×