Jump to content
Search Community

Parallax scrolling and regular browser speed like these sites?

alessiopaoletti test
Moderator Tag

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

Thank you! I did not ask for an explanation in detail how you answered is fine!

 

The thread is just what I was looking for!

 

while for Intersection Observer API I seem to find only examples in which it is used to make objects appear when they come into view,
but nothing seems to me to be continuous, if you know some examples on codpen or tutorial it would be useful to see if it's for me.


Otherwise thank you, I will try to read its functioning well for good!

Link to comment
Share on other sites

Hi @alessio,

 

Unfortunately, there are still few examples with comprehensible explanations.

 

Here's a try: The special highlight lies in the threshold and the intersectionRatio, which 'controls' the progress of the animation.

 


threshold: Array(100).fill().map((v, i) => i / 100) // important calling 100 times
// threshold: 1, // calling callback only once when 100% visible
//threshold: 0, // calling callback only once when 1px visible
//threshold: [0.2, 0.4, 0.6, 0.8, 1.0], // calling callback 5 times

let isRatio = entry.intersectionRatio;
//play the progress of the animations in relation to intersectionRatio
TweenLite.to(animations[i], 0, {progress:isRatio, ease: Power0.easeNone

 

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

 

 

Here - in an iFrame - the apple is nervous. So open the pen ...

I hope it helps you.

 

Kind regards

Mikel

 

Another example:  

 

See the Pen oGwRvW by aderaaij (@aderaaij) on CodePen

 

As @OSUblake (he presented this example here for the first time) already remarked: scroll the page and the scroll intersectionObserveer function in the iframe reacts. I miss him!

 

  • Like 1
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.
×
×
  • Create New...