Dmytro Ivanovich
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Dmytro Ivanovich
-
-
3 hours ago, mvaneijgen said:
Трудно отлаживать без минимальной демонстрации 🤷
Знаете ли вы о gsap.matchMedia(), с его помощью вы можете создавать медиа-запросы, как с помощью CSS, и, таким образом, вы можете устанавливать разные значения для разных размеров экрана в GSAP https://gsap.com/docs/v3/GSAP/gsap.matchMedia ()
Надеюсь, что это помогает, в противном случае мы должны будем увидеть минимальным демо, так что мы можем помочь вам. Счастливый анимацию!
I made a demo, and now it looks and works almost exactly like on the website
See the Pen wvNoKZy?editors=0010 by ftpdnqao-the-sans (@ftpdnqao-the-sans) on CodePen
-
23 minutes ago, mvaneijgen said:
Трудно отлаживать без минимальной демонстрации 🤷
Знаете ли вы о gsap.matchMedia(), с его помощью вы можете создавать медиа-запросы, как с помощью CSS, и, таким образом, вы можете устанавливать разные значения для разных размеров экрана в GSAP https://gsap.com/docs/v3/GSAP/gsap.matchMedia ()
Надеюсь, что это помогает, в противном случае мы должны будем увидеть минимальным демо, так что мы можем помочь вам. Счастливый анимацию!
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
-
On 10.10.2023 at 10:23, mvaneijgen said:
Я думаю, мы не сможем исправить это за вас. Я просмотрел ваш лист со спрайтами, и мне кажется, что между вашими спрайтами неравномерные промежутки, что означает, что вам либо нужно использовать неравномерные значения во всей анимации, либо исправить ваш лист со спрайтами, и в том, и в другом случае мы не сможем помочь.
Внимательно посмотрите на свой спрайт, в проблемных точках вы увидите, что разрыв между спрайтами неравномерен.
Я сделал ваше перо еще проще, нам не нужны все остальные материалы, чтобы увидеть проблему. Если кто-то еще захочет взглянуть.
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
See the Pen VwqgKxv by dimores28 (@dimores28) on CodePen
-
5 hours ago, mvaneijgen said:
If @akrdesign their solution is not not what you're looking for, be sure to take a look at the following topic
And if that isn't the solution either please post a minimal demo and someone around here would surely come up with a solution
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' })
- 1
-
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.
Vertical slider with different slide heights
in GSAP
Posted
See the Pen wvNoKZy?editors=0010 by ftpdnqao-the-sans (@ftpdnqao-the-sans) on CodePen