Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

1 Newbie

About lklio

  • Rank
  1. Perfect! Thanks @ZachSaucier for your support!
  2. 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?
  3. 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
  4. 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). https://codepen.io/billmn/pen/GRqdGGr Does exists a way to prevent this?
  5. 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, }, }) })
  6. 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: https://codepen.io/billmn/pen/mdExXEr Thoughts on how to solve this? (HTML can be changed if can help) Thank you!
  7. Wow, thank you very much for your solution! it works very well!
  8. 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
  9. 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 😅
  10. 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. safari-rendering-issue.mp4