Vertical slider with different slide heights

[Dmytro Ivanovich]

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

[mvaneijgen]

Hard to debug without a minimal demo 🤷

 

Are you aware of gsap.matchMedia(), with it you can build media queries like with CSS and thus you can set different values for different screen sizes in GSAP https://gsap.com/docs/v3/GSAP/gsap.matchMedia()

 

Hope it helps otherwise we'll have to see a minimal demo, so that we can help you. Happy tweening!

[Dmytro Ivanovich]

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

[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

[Dmytro Ivanovich]

See the Pen wvNoKZy?editors=0010 by ftpdnqao-the-sans (@ftpdnqao-the-sans) on CodePen

[Rodrigo]

Hi,

 

Sorry but your demo is far from being minimal and we don't have the time resources to comb through complex codebases trying to find the possible causes for an issue.

 

Based on the description you provide, what you could do is to check the screen height and the element's height. If it's bigger than the screen then setup a timeline that first has an animation that moves the element to the reading position and then another animation that moves the content in order to emulate scrolling, like this demo:

See the Pen NWMZrbj by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!