lklio

Thanks for reply @OSUblake

I 've seen problems with first and last section.

I've tried to create an infinity vertical scroll with auto snap to section but I can't understand how to make the cycling effect.
Are there any alternatives?

Hi everyone,

I've seen this demo to use CSS scroll snapping.

I've tried to mix this setup with looped scrolling

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

Is this mix possibile? Any ideas about?

Thanks in advance

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

Perfect! Thanks @ZachSaucier for your support!

Thanks @ZachSaucier, your demo is the answer of all questions!

Do you suggest to fix canvas with fixed position and control body scroll with ScrollTrigger? Or there is a better way?

Hi guys,

I've seen this beautiful site https://browserhistory.squarespace.com/ and I've tried to replicate animation for a test.

I started project with PIXI.js and the integration with GSAP sound good. But, how could be possible to manage the scroll and have effect in canvas?

Anyone have ideas? I've supposed ScrollTrigger could be the way for snap and repeat but I'm not sure about the right trigger to use 😅

Thanks to anyone

Hi guys and thank you for your support.

To workaround this issue, I have tried to move the <video> node outside the "project-section" managed by GSAP clicking on a button that will replace the native controls of the video.

Now the player stays fullscreen but, when I go out,  the timeline scroll to the next section (probably because of snap).

See the Pen GRqdGGr by billmn (@billmn) on CodePen

Does exists a way to prevent this?

Sorry @akapowl but I notice a strange thing ... any idea on why if you click on the Fullscreen video control the video opens in fullscreen and come back immediately?

Removing this code, the video opens in fullscreen correctly:

otherSections.forEach((section, index) => {    
  tl.to(section, {
    scrollTrigger: {
      trigger: section,
      pin: true,
      pinSpacing: false,
    },
  })
})

It works like a charm, thank you!

Hey @akapowl, I notice now that:

gsap.set(section, {
    yPercent: 100
})

Doesn't allow a user to click on an element inside a slide (like a video) because is 100% translated on the y-axis.

Try this Codepen that include a video, you can't click on video controls: 

See the Pen mdExXEr by billmn (@billmn) on CodePen

Thoughts on how to solve this?

(HTML can be changed if can help)

Thank you!

Wow, thank you very much for your solution! it works very well!

Hey guys,

as you can see from Codepen I have some pinned sections managed with ScrollTrigger.

However, I would like to wait for the animation on the image (clipPath) to complete before I can scroll to the second section.

Can anyone help me figure out how to do it?

Another thing, which is the best scrolling Event to update a counter that show the current "slide"? (like 1/4, 2/4, 3/4, ...)

Thank you

See the Pen KKMQxYR by billmn (@billmn) on CodePen

Thanks guys for replies.

@ZachSaucier I've supposed the issue couldn't be a GSPA problem because on other browser it works fine... Opera desktop too!

I've tried with static image but the result is the same. Also with rotation or transform... Force re-rendering unfortunately in this case couldn't help@Shrug ¯\_(ツ)_/¯... Maybe on mobile but I've not tested yet.

The only solution is to limit the viewport to 1920x1080px but for this project I need a full screen video as intro...

I agree with you @Shrug ¯\_(ツ)_/¯, Safari is the new crash test browser 😅

Hi guys,

I've an issue with Safari rendering when I use MorphSvg Plugin to change SVG path of a mask.

With other browser I've no problem, but with Safari Desktop (monitor over 1920x1080), and Safari Mobile,  the SVG morphing animation is not fluid.

I'm using the scrollPlugin, but also without that integration the result is the same.

Any ideas?

Thanks to everyone.

See the Pen MWyWamz by lucalionetti_ (@lucalionetti_) on CodePen