Priyank Tyagi Posted September 5, 2020 Share Posted September 5, 2020 Can anyone tell about this image transition on scroll and content change with image.Please look at this website https://cuberto.com/ See the Pen by (@) on CodePen Link to comment Share on other sites More sharing options...
Richard1604 Posted September 5, 2020 Share Posted September 5, 2020 Hello priyank, welcome to the club I’m sure that you will enjoy it. thats a great web site but it is also complex in the sense that different devices display the content in different ways using media queries and or gsap matchmedia. much of the site is done with scrolltrigger type animation and I see that there is a parallax effect and some pinning. on my tablet I also get a wave like reveal using a mask or clip effect. there is a lot to cover here. scrolltrigger and parallax effects are well covered along with some introductory videos in the learning section of the web site. i suggest that you take some time to look at the fundamentals but parallax effects can be done with a simple translation or a more recent post looked at changing the padding on an image with along with a scale. if you are interested in the wave effect then I think that @pointC is the expert on masking and clipping and he has posted various basic approaches but this one is more dynamic and advanced. Link to comment Share on other sites More sharing options...
Priyank Tyagi Posted September 5, 2020 Author Share Posted September 5, 2020 thanks, @Richard1604 sir for your time. I have use scrollmagic and all but how to achieve this wavy effect image change. I want that. Link to comment Share on other sites More sharing options...
Richard1604 Posted September 5, 2020 Share Posted September 5, 2020 I wondered... this post has some basic clips and masks but as i mentioned the wavy effect is a bit more complicated. The best I can suggest is a MorphSVG clip based on a bezier path but I think that you really need more some expert advice. 1 Link to comment Share on other sites More sharing options...
darkgr33n Posted September 5, 2020 Share Posted September 5, 2020 Hi Priyank, I'm just starting out with GSAP and I was interested in this effect as well. From reading a few different posts, i think this effect is actually WebGL. Codrops has some good examples, but one in particular looks very similar. If you mess with the width and X/Y scales, you can see it here: https://tympanus.net/Development/webGLImageTransitions/index.html 1 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 5, 2020 Share Posted September 5, 2020 The core of it (pinning, revealing an image on hover) can be done with ScrollTrigger. The actual wavy effect could be done using clip paths or masking or WebGL. Unfortunately we don't have the capacity to create tutorials for every effect that people post to our forums but if you have a specific question feel free to ask and we'll do our best to help. Link to comment Share on other sites More sharing options...
Priyank Tyagi Posted September 5, 2020 Author Share Posted September 5, 2020 Yes i know, thanks for your support . Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now