Dmytro Ivanovich

Minimal demo (codepen.io)

I made a demo, and now it looks and works almost exactly like on the website Minimal demo (codepen.io)

Okay, I'll try to make a minimal demonstration

Hello! I'm finishing a website project with animations, and there is a problem in one section of the site: there are blocks of text that appear animatedly and the customer does not like the fact that this block scrolls quickly on the phone and you can easily scroll the block without seeing the text appear, I tried to solve this problem by turning off the scroll at the beginning of the animation and turning it on in the middle of the animation of the text appearance, it doesn't work very well. I decided to try to make these blocks scroll like a vertical slider, I found examples of GSAP vertical sliders, but because the text blocks are different, it doesn't work well. In the example, all the slides are the same height, but in mine they are different. The project is made using webpack and is split into many files, which makes it difficult to make a minimal demonstration. Therefore, here is a link to the site itself: https://rivne-kolo2.netlify.app/ I am attaching a photo of this section An additional complication is that in this section there is also an animation of the rotation of the bagel tied to the scroll. Maybe you can suggest some example that I could adapt to my needs, or maybe GSAP has some solutions to this problem

Thank you! Very helpful, I suspected there might be a problem with the sprites but I needed confirmation from a specialist so I could get the designer to redo it, because he's not so easy to convince to make changes

Help me solve a problem with adaptive animation, I use GSAP and scrollTrigger to make a sprite animation of a rotating bagel, and there are problems with screen resolutions from 1920px to about 1550px, when you change the screen size, the animation breaks a little, sprites are shifted and it doesn't look good. The problem manifests itself when I reduce the screen size by a few pixels, the animation breaks, when I further reduce it by a few more pixels, it is restored. The project is already large with many files, so it was difficult to make a demo version in codepen. The problem is that the sprites are shifted and the animation looks bad. link to the entire site to make the problem clearer https://rivne-kolo.netlify.app

Your advice helped a lot. Thanks a lot! now my styles work as they should.

I made an animation of the vertical scrolling of the cards, everything works fine, the only thing is that when the "pin: true" property of the scrollTrigger is enabled, a large indent appears at the bottom of the animation block, how to deal with it? Without the "pin: true" property, the animation doesn't work the way I want it to.

Hi all! I solved my problem using ScrollTrigger, timeline and MotionPathPlugin. With the help of JavaScript, I calculated the coordinates of the points where the image should have moved so that the animation was adaptive to the width of the browser window. Here is an example code, maybe someone will need it. let path = [ //1 {x: shiftToRight, y: startPoint}, //2 {x: shiftToLeft, y: 680}, //3 {x: shiftToCenter, y: marqueePoint}, //4 {x: shiftToCenter, y: endPoint}, ]; const scaledPath = path.map(({ x, y }) => { return { x: x, y: y } }); const aboutSpotScene = gsap.timeline({ scrollTrigger: { trigger:".about", start: "top 20%", endTrigger: ".our-history", scrub: 1.5, }, }); aboutSpotScene.to(".big-spot", { motionPath: { path: scaledPath, align: 'self', alignOrigin: [0.5, 0.5], // autoRotate: true }, duration: 2, immediateRender: true, // ease: 'power4' })

I made an animation of horizontal scrolling, it works fine on a computer, it works poorly on mobile phones, when scrolling, it scrolls in one direction to the end, after which it stops animating. let galleryScene = gsap.timeline(); let item = gsap.utils.toArray(".gallery__item"); const galleryTriger = new ScrollTrigger.create({ animation: galleryScene, trigger: ".photo-gallery", start: "top top", end: "+=" + 600, // markers: true, scrub: 1, snap: 1 / (item.length - 1), pin: true, ease: "none", }); function getMoveDistance(){ let move = document.querySelector('.gallery').scrollWidth; let block = document.querySelector('.gallery').offsetWidth ; move = (move - block) * -1; galleryScene.clear(); galleryScene.to(".gallery", 25, {x: move}) } getMoveDistance(); window.addEventListener('resize', getMoveDistance, true);

You need to make an animation on the site so that when you scroll the page, the picture moves around the site, moving from side to side. Site structure: on the right the picture on the left is tex, the next block on the right is the text on the left picture, so the blocks alternate. You need to make an animation on the site so that when you scroll the page, the picture moves around the site, moving from side to side. Site structure: on the right the picture on the left is tex, the next block on the right is the text on the left picture, so the blocks alternate. enter the description of the image here so that when the user scrolls through the site, the image follows him and smoothly shifts under the text block, as if highlighting the text.