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!

Hi! I have an animation and I have used scrolltrigger for add class to the container and then animate the elements with css, but I wont that the image translate down as parallax animation. but the parallax animation lag a lot but not the value in the ispector window, the is only on the page and there isn't a drop of frames. and if i remove the add class part animations the parallax effect is smooth. why?? and how can i solve? Link to the site

Thank you! I did not ask for an explanation in detail how you answered is fine! The thread is just what I was looking for! while for Intersection Observer API I seem to find only examples in which it is used to make objects appear when they come into view, but nothing seems to me to be continuous, if you know some examples on codpen or tutorial it would be useful to see if it's for me. Otherwise thank you, I will try to read its functioning well for good!

Hello! I don't understand how do you make a smooth scrolling effect of the browser in this way, and then the parallax effects controlled by the scrolling, I checked and it seems to me that both use gsap but no scrollmagic. HELP ME I WANT THIS SMOOTHNESS! https://201d.jp/en/ http://as.ouiwill.com/

hi, I'm new, I would like to make animations of objects with the scrolling of the page as in this site: https://201d.jp/en/ is there a tutorial for this?