paketaaa

@Cassie i've tryed to minify code and leaved only one tween which has a problem.

See the Pen wvmRjYL by paketaaa (@paketaaa) on CodePen

I'll try to explain one more time.
When you scroll,  you make left element active and translateY parent element to child element's height, but in my case when you scroll to the bottom and then back to top, parent's translateY not equal zero. I hope i explained well. I also want to tag @GreenSock because this man helped me last time with this case but with my changes it's not working like i wanted to. Thanks in advance for your reply.

I've tried to refactor my code and make it with preventOverlaps and still wrong. Maybe im wrong with math?

See the Pen wvmRjYL by paketaaa (@paketaaa) on CodePen

 

 

after scrolling whole section and then back to top my translate y not equal zero. I still dont understand why

@Cassie Still can't fix this issue, i added prevent overlaps but nothing changing, is there any other ways to force end animation or I just doing wrong?
(updated codepen)

@Cassie An example of how my demo should look like is in this topic (dropbox video)

 

I think i need to set progress(1) if new animation starts 🤔

Also thanks for new release post. I appreciate it

33 minutes ago, Cassie said:

Sounds like a logic issue, yep.

Maybe this pen will help?  If not and you have 'conflicts' not just visual overlaps - I'd look at restructuring your code.
 

 

Also check out the new release. You can get rid of those matchMedia checks. 🥳
 

 

 

 

Should i just add preventOverlaps and fastScrollEnd on each scrolltrigger? If it is then it doesnt work for me. I'll try to explain.
When I'm scrolling, i need to pin my right side panel and set active element on top of a page like scrolling. But when i'm scrolling back my "transformY" on ".monitoring-wrapper" is not equal 0 for some reason. Sorry for my bad English and i hope you'll help me. Thanks!

Hello, my animation is not ending correctly when i'm scrolling fast. I was looking threads and many people said that it's logic issue but i still dont get a point how to solve it. When im scrolling fast my "transformY" on ".monitoring-wrapper" is not ending because new starts. so maybe i can make a queue or something like that?

See the Pen gOeZbJN by paketaaa (@paketaaa) on CodePen

23 minutes ago, GreenSock said:

These forums aren't really intended for providing build-to-order solutions, but here's a quick nudge in the right direction: 

 

 

 

It's not an exact copy of the video - it's just meant to be something that shows you some concepts and then you can tweak from there. 

 

This demo may also be helpful to analyze: 

 

 

 

Good luck!

I'm so happy that Greensock Community is always ready to help. It's not excact copy of video but I will look through you code and will fix mine. Thank you so much! Sorry for that kind of post but i really dont know how do define my question and ask it right way so i had to pin video do describe my problem correct

Hey once again. I've tried to do smth like this: 
https://www.dropbox.com/s/mh526bkqytfp3sr/brandmonitor_animatic.mp4?dl=0 (starting at 0:05s) but i stucked at the beginning, so i cant even change color of left elements. I was watching guides and docs but still doing wrong. If you would help me to understand what am i doing i will be happy. Thank you

See the Pen rNddBmm by paketaaa (@paketaaa) on CodePen

Hey Everyone, is there a way to scroll my arches in Codepen right to next element without using id on him? I've tried to make offsetY 100% but I think I'm doing something wrong.

See the Pen WNMzeez by paketaaa (@paketaaa) on CodePen

6 minutes ago, mvaneijgen said:

I see you have two sections and you pin both, but you want the second one to move like normal. So I have removed the ScrollTrigger from the second one and just have the pin on the first section. I've also add some CSS the have the second section overlap the first one. 

 

 

 

Thank you for quick response, I was trying like that before, but i didn't added z-index so background of second sections wasn't appearing. Everything works good!

Hello everyone, I'm new at GSAP so maybe my question is kinda simple but I still dont understand what am I doing wrong.
I wanted to create layer covered sections like in example of scrolltrigger but my big section is not scrollable. So i wanted to ask for a help to explane how this thing works. TYSM

See the Pen WNMzeez by paketaaa (@paketaaa) on CodePen