Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by lklio

  1. 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

  2. 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?

    • Like 1
  3. 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,


  4. 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

  5. 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 😅


  6. 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