Jump to content
GreenSock

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

Trying to to recreate The Weeknd website Scrolling effect

Go to solution Solved by Cassie,

Recommended Posts

I'm trying to recreate The Weeknd website Scrolling effect, I have written a working gsap code but I just cant crate that IMAGE CLIP EFFECT when u scroll enough that Image will pass by u.

in my code, it's just scrolling and zoom but on Weeknd website, it has the effect of zooming and the image will pass by u, I'm trying to create that effect but right now I don't know how to hide an image when it becomes full zoom.
 

See the Pen vYgdBVr by icodeayush (@icodeayush) on CodePen

Link to post
Share on other sites

Hi there! 

 

This looks great, good job. 🙂

I checked out the website and most images are disappearing offscreen, but for the ones that need to be hidden - you can change opacity after the image has resized by adding another tween to the timeline

Tweens added to a timeline follow one after the other, so you could do something like this.
 

LandingPageScrollTrigger.to('#wrapper #img7', { transform: 'scale(1.4)', x: "15%" }, 0)
LandingPageScrollTrigger.set('#wrapper #img7', { opacity: 0 })

 

Or if you wanted more control over the time you could use a position parameter (like the 0 you're using in the first tween)
 

LandingPageScrollTrigger.to('#wrapper #img7', { transform: 'scale(1.4)', x: "15%" }, 0)
LandingPageScrollTrigger.set('#wrapper #img7', { opacity: 0 }, 1.5)

 

  • Like 5
Link to post
Share on other sites

 

Welome to the forum @iCodeAyush

 

There recently has been a thread about that same effect.

 

Maybe the example by tailbreezy can give you another idea how to get it working in combination with what Cassie mentioned above about the images that will need to be hidden.

 

Happy tweening.

 

 

  • Like 5
Link to post
Share on other sites
13 hours ago, Cassie said:

LandingPageScrollTrigger.to('#wrapper #img7', { transform: 'scale(1.4)', x: "15%" }, 0) LandingPageScrollTrigger.set('#wrapper #img7', { opacity: 0 }, 1.5)

Thank u sm @Cassie for ur feedback and that ".set" for Opacity worked, i was trying with the opacity in timeline but i didn't try .set and its really worked the way i wanted 😊

  • Like 1
Link to post
Share on other sites
11 hours ago, akapowl said:

Maybe the example by tailbreezy can give you another idea how to get it working in combination with what Cassie mentioned above about the images that will need to be hidden.

Thank u sm @akapowl for that example, i looked at it and i see there's "translateZ" and i thought i should rewrite my animation with the use of translateZ and it worked exactly what's happening on Weeknd website.

again thank to u both for helping me on this code 😊

  • Like 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.

×