Holo_Back
Holo_Back's Achievements
-
Rare
-
Rare
-
-
-
Recent Badges
5
Reputation
-
Hi all, I'd be interested in an example of how this rotating curtain animation works on the following website: https://nieuwbergen.com/ See the attached screenshot. Thanks in advance
-
Hi @all, as you can see in the example, the last card moves down and overlaps into the next container. How does the end value needs to be calculated, so that it's basically stopping when the last card is present. BR
-
Hi, what is the most efficient way to make the solution above responsive? So f.e. updating the offsets when resizing the browser window or putting the mobile device in landscape mode…
-
It doesn't change anything if we use .webp instead of .jpg or .png, because - as you have mentioned - the amount of requests is too high with 19 manufacturers and 119 frames per manufacturer. We'll try cutting down the frames per manufacturer, otherwise we probably need to throw away this idea for now...
-
Hi Zach, we tried your solution and it works great, but the thing is, we have 19 manufacturers with 119 frames/jpegs per manufacturer and therefore the loading times are very long, even though we are using latest compression techniques and async loading (IntersectionObserver). Is there a solution for this problem?
-
Great, I think that's exactly what we are looking for Thanks!
-
Hi Zach, okay we'll try that too - can you provide a best practise example with GSAP?
-
Hi GreenSock, thanks a lot for your feedback! We thought about image series and spritesheets to, but as you've mentioned, the file size is a problem. I'll talk to our video guy to experiment with different encoding techniques. Thanks and have a nice day!
-
Hi Zach, thanks a lot for your fast response! Unfortunately it's as choppy as my solution - let me show you what we want to achieve: Basically we have developed a car configurator for a sports car tuning company and now we want to extend the manufacturer grid with short 3D car renderings (.mp4) instead of simple images, which are animated on mouseenter and mouseleave - is there a better solution without videos? pp-performance-optimized.mp4
-
Hi everyone, I'm trying to play a short video clip on mouseover and play it reverse on mouseout: mouseover: video.play() mouseout: video.playReverse() As there is currently no native function for playing a video reverse, I tried it with setInterval by manipulating currentTime, but this solution is not smooth enough. Is there a smooth solution with GSAP to play a video backwards?
-
You're right! I got your message wrong and therefore my calculation was incorrect. Thanks a lot! Below the working example for all future visitors https://codepen.io/holo_back/pen/ExKWVdq
- 12 replies
-
- 1
-
-
- parallax
- translation
- (and 2 more)
-
Hi Zach, thanks for your fast response! I created a demo on codepen, it basically works, but on specific screen sizes you can see the background color of the container behind the parallax container: https://codepen.io/holo_back/pen/ExKWVdq
-
Ok thanks, no problem ? I will try further - if anyone could provide an example with Scrolltrigger, it would be great!
-
Yes, but I want to use Greensocks Scrolltrigger instead, that's why I asked for a solution with Scrolltrigger.
-
Yes exactly, that's what I did too. The translation effect is easy to create with GSAP, but what I didn't get done yet, is to get the correct y-value for each image with Scrolltrigger. Does anyone have a working example to show?
