Trying to to recreate The Weeknd website Scrolling effect

[iCodeAyush]

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

[Cassie]

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)

 

[akapowl]

 

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.

 

 

[iCodeAyush]

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 😊

[iCodeAyush]

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 😊

[APoC23]

Hi guys,

 

I'm working on a project website for a friend of mine who is a musician and is going to release a new album in May. I am responsible to implement the site's features and technology.
I got a reference for the Weeknd's site from my friend and then I manage to find your post. I am no GSAP expert and I've been having some trouble getting the site to work nice and stable.

 

As you can see here the site runs laggy and after you pass through the scroll trigger component it starts to have all sorts of glitches.
At first, I thought the video was the main cause of the troubles but after some testing, I figured it wasn't.

 

I'm using react and already tested with a vanilla version but with no success.
Probably I'm not using the correct ending method for the LandingPageScrollTrigger function.

 

Another problem I'm having is that I needed some of these sliding pictures to behave as links and have anchor tags in them. Unfortunately, if I add the <a> tag to the elements in the ImgWrapper the images won't move at all.

 

Thanks so much for your time, I have my code on Github and will have no problem in giving you access to it. Please let me know.

 

Cheers,

Eduardo

[GreenSock]

Hi @APoC23 Welcome to the forums!

 

We don't really have the resources to offer free general consulting or troubleshooting for live web sites (please read the forum guidelines) but we'd be happy to answer any GSAP-specific questions especially if you provide a minimal demo. Otherwise, you're welcome to post in the "Jobs & Freelance" forum to see if you can hire someone to troubleshoot for you. Performance audits can be very deep and time-consuming, FYI. 

 

Good luck with the project!