alessiopaoletti

This is the same with scrub: true of scrolltrigger I think. I intended to possibly use scrolltrigger with "scrub: false" and only to give play to the playback as if it were a video or even using a "play" button.

You are a king. For the future last question, if I want to play the same animation like a "video" and use scrolltrigger to play, can I do?

updateImage = function() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(images[Math.round(playhead.frame)], 0, 0); onUpdate && onUpdate.call(this); }; I had tried it before in this way but i get an error "canvas is not defined"

If I use images without background I need to delete the previous frame, how can I do this?

Hi, I'm trying to make a GIF-type animation with images with GSAP but there is a pause before each series, how can I make it look like a single loop?

Now work well, thanks! What do you mean "you could do it many different ways"? there is a better way?

I have found the code here in the forum, if you know of a codepen that use gsap I prefer with the method mentioned by you

I use Chrome last version 118.0.5993.118, check the screen recording in drive on the client hosting doesn't it's the same: https://drive.google.com/file/d/1mWT3UDQwhCySdzpdjWUJwtfIZIwtc9uT/view?usp=sharing

Hi, I find this animation here in the community. I'm trying to get this animation and on Codepen it's almost perfect even if I will have to increase the number of frames, but if I do it on the site I'm creating on the client's hosting it lags a lot. https://underdogsitalia.com/ Code problem? Hosting problem?

For the slide I had used a snippet of code of a codepen demo with scrolltrigger and scrollTo: let sections = gsap.utils.toArray(".scroller-sections"), scrollTween; function goToSection(i) { scrollTween = gsap.to(window, { scrollTo: {y: i * window.innerHeight, autoKill: false}, duration: 1, ease: "expo.out", onComplete: () => { scrollTween = null }, overwrite: true }); } sections.forEach((section, i) => { ScrollTrigger.create({ trigger: section, start: "top bottom-=1", end: "bottom top+=1", onToggle: self => self.isActive && !scrollTween && goToSection(i) }); }); the problems are for the animations that are different for each slide and the elements (inside svg) if you see here https://punctum.studio/preview/sitaricerca/ are positioned with transform or matrix and y or x doesn't work well.

Later I would add a function to update the value in case of resize, anyway this is the reference site: https://koox.co.uk/ my site: https://punctum.studio/preview/sitaricerca/ I don't know how they did it, I'm trying to reproduce this effect using gsap, I have svgs with elements inside to move from the bottom to the starting position when the section is in view, and from the starting position to the top when scrolling to next section, so I'm using Scrolltrigger and fromTo.

https://codepen.io/alessio-paoletti/pen/xxQgYLJ?editors=0010 As you can see, the end position it's in top and not at the bottom of the trigger. this is the demo, the problem is this, I have the container decentrated but i need when it's in full view the progress of the animation at 50%, this problem it's correlated to an animation of elements inside a svg, I used fromTo because I need to create a parallax animation that when entry it have a transition from bottom to it's original position when it's in view, and then a transition from original position to top when the scroll go down. the website in building https://punctum.studio/preview/sitaricerca/

Hi, I need to have the start and the end position in a precise point like this "top 500px" but for the px value I have a calc and a variable that return "top 500px" or "bottom 500px" but doesn't work the bottom value, why? Here is my code: var view_h = (($(window).height() - (header_h + footer_h)) / 2) + header_h; var val = Math.round(view_h); // es. 500px var top_centered = "'top " + val + "px'"; var bottom_centered = '"bottom ' + val +'px"'; var seconda_slide = gsap.timeline({ scrollTrigger: { trigger: ".intro.chi-siamo", start: top_centered, end: bottom_centered, scrub: 1.5, markers: true, } });

Hi, I've make a demo on codepen! https://codepen.io/alessio-paoletti/pen/WNjYKpb this is a try, I have used css animations for the reveal animations but then i want to translate the image down as parallax transition like your first demo, but in my case with the reveal effects the parallax animation lagging.

Thanks I appreciate it a lot!, However, I'll make a demo on codepen but with scrollTrigger what's the best way to do the animations triggered with a timeline and then continue in parallax on one element? Thanks for the replies!