Jump to content
Search Community

Pin image to specific position of container /w SmoothScroll

Redcase Software test

By Redcase Software
in GSAP

Moderator Tag
 Share
Go to solution Solved by mvaneijgen,

Recommended Posts

Redcase Software test

Redcase Software

Posted
Posted

Hello once again,

This time I have the following problem:

I have some images for each blog post where I want them to be pinned in the same place from my container and when the user hovers over a blog post then the image changes.

I had achieved the desired result with position sticky but once I applied smoothScroll things didn't go so well. I said try doing it with scrollTrigger and pin. I want to achieve something similar to this one in the team section. https://k72.ca/en/about

Any ideas?

See the Pen zYeVpwL by pmakos (@pmakos) on CodePen

Link to comment
Share on other sites
  • Solution
mvaneijgen test

mvaneijgen

Posted
  • Solution
Posted

What is the issue? Seems to work for me. 

 

The only issue I see is that you don't wrap your page in the #smooth-wrapper and #smooth-content elements  https://gsap.com/docs/v3/Plugins/ScrollSmoother/

 

Your HTML content should reside in a single content element (usually a <div> but it doesn't really matter) - that's what gets moved around when the user scrolls. That content element is wrapped in a wrapperelement that serves as the viewport. The actual scrollbar remains on the <body>, so your setup would look like:

  

<body>
  <div id="smooth-wrapper">
    <div id="smooth-content">
      <!--- ALL YOUR CONTENT HERE --->
    </div>
  </div>
  <!-- position: fixed elements can go outside --->
</body>

 

Your pin logic seems off to me. You can also do pin: "#myElement" to have the trigger and the pinned element be separate. Then you just have the play with the end and start values to suit your needs

 

See the Pen RwvzQKp?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

And the last problem (not really a problem 🙃) you're using JS to add a class to an element, this of course need to be fancy GSAP animations! 

 

Hope it helps and happy tweening! 

  • Like 3
Link to comment
Share on other sites
Redcase Software test

Redcase Software

Posted
  • Author
Posted

@mvaneijgen

Oh i see... 
We trigger: "#home-blog", and pin the ".pin-images" .... I'm stupid... 
"And the last problem (not really a problem 🙃) you're using JS to add a class to an element, this of course need to be fancy GSAP animations! " 
It's an implementation i have like a year ago. So i just copy it to my project now :P 
Thanks once again !!
Really appreciated it!

  • Like 2
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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...