Jump to content
Search Community

Image transitions on scroll.

Danish Shah test
Moderator Tag

Recommended Posts

 

Hey, welcome to the forums @Danish Shah

 

I remember that pen of yours

 

 

 

 

There actually is another thread that covers a way to get things running similar to what cuberto does on their page - although they are using some form of WebGL for the fluid part of the animation - which you'd have to figure out yourself, I'm afraid. Maybe this can help get you started in the right direction though.

 

 

 

 

 

That thread also contains a suggestion for how to possibly get started with the WebGL part on the images.

 

 

 

Edit:

 

And since there are different ways to approach an effect as such, I'll also link you to this thread that has a similar animation going on, but tweens on the yPercent instead of the height (which in most cases is better to do).

 

 

 

  • Like 4
Link to comment
Share on other sites

Alternately - you could use masking and SVG paths for the fluid part.

Here's a liquid morphing demo - (a lot of it is in the setup) @PointC has a great article here if you want to dig in.

See the Pen BYwgBg by osublake (@osublake) on CodePen



And a much simpler liquid mask without morphing 

 

See the Pen RwRORqB?default-tab=result&theme-id=18940 by cassie-codes (@cassie-codes) on CodePen

  • Like 7
Link to comment
Share on other sites

@akapowl. Thanks for your reply...i am trying to recreate the pin shared by you....i have some content outside the container....and i am facing the issue where the slides are getting scrolled before coming into the viewport. I made some changes but wasn't able to fix this. 

 

Here is the link to pen 

See the Pen VwpbmaW by Danish_Khurshid (@Danish_Khurshid) on CodePen

 

Thanks! 

Link to comment
Share on other sites

 

The demos in the thread linked to are making use of smooth-scrollbar (like cuberto is on their page).

 

If you place things outside of the <div class="scroller"></div>,  you are creating a different scroll-context on top of the smooth-scrolling that is implemented here thus things are bound to break the way they are set up in the demos.

 

So I'm not exactly sure what it is you're trying to achieve @Danish Shah

 

Either include all your content inside the scroller or if you don't want to make use of smooth-scrollbar, remove everything related to it - the upper portion in JS and the .scroller div in HTML, its respective CSS and the scroller-setting in the ScrollTriggers.

 

If you want to use both, smooth-scrollbar AND native scrolling for this example, I can image things to become rather complicated based on how smooth-scrollbar works very different from native scrolling - and since smooth-scrollbar is a third-party plugin it is not supported in these forums.

 

Maybe I'm just misunderstanding what it is you are trying to achieve though - if so, could you please try and rephrase?

 

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Hey again! I wanted to recreate the similar kind of effect for footer as that in  https://cuberto.com/. I was able to do so by only using css. But every time i use smooth scroll. The CSS animation thing doesn't work. And if i don't use smooth scroller the animation on images doesn't look good. I want to get it working with smooth-scrolling I updated the code in the pen.

See the Pen VwpbmaW by Danish_Khurshid (@Danish_Khurshid) on CodePen

 

Can you kindly take a look and help me out with making! 

 

Thank you. 

@akapowl @Cassie

Link to comment
Share on other sites

Hey @Danish Shah

 

Maybe you linked to the wrong pen?

The pen you posted does have a footer in the markup but neither does it have any CSS for that, nor any JS.

 

There is a different thread where I posted a couple of examples on how to do a parallax footer effect like that - with native scroll, smooth-scrollbar and locomotive-scroll. Check it out and see if that helps you maybe.

 

 

 

 

Edit:

 

I see you just updated the pen. There still is an extra browser-scrollbar and it looks like you didn't include the neccessary CSS for the body and scroller for smooth-scrollbar to work / display properly.

 

If you want to continue using smooth-scrollbar, I highly recommend digging into how it works and what you have to consider for setting it up properly, or you will run into more and more problems further down the road.

 

Here are some helpful links:

 

 

  • Like 2
Link to comment
Share on other sites

Hey @akapowl thankyou for your reply. I was able to replicate the footer with the example you have provided. 

But for the sidebar section...i made some changes to html structure and can't get it working as per the example provided by you here. 

 

 

Here is the updated pen. Can you kindly once look at this and help me out! 

See the Pen VwpbmaW by Danish_Khurshid (@Danish_Khurshid) on CodePen

 

 

Thank you! 

Link to comment
Share on other sites

 

For animating, and scrollbased animating in particular, markup and CSS are key, so you can not expect the same ScrollTrigger setup to just work when you change the HTML markup - it was written with that specific markup in mind.

 

So if you want it to work with a different markup you'd have to rewrite the JS probably quite a bit for it to work with that markup. If you get stuck along the way and have any specific questions, we can see how we can possibly help you, but we can not just cater custom coded solutions for every request that is being made, I'm afraid.

 

  • 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
  • Recently Browsing   0 members

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