IvanK Posted November 17, 2021 Share Posted November 17, 2021 gsapInstance.timeline({ scrollTrigger: { trigger: ".totem-animal .wrapper", scrub: false, // pin: true, start: "top 30%", end: "bottom -30%", } }); gsapInstance.timeline({ scrollTrigger: { trigger: ".totem-animal .title", anticipatePin: 1, scrub: true, start: "center 55%", end: "bottom 50%", } }).to(".totem-animal .title .step1", {opacity: 1, top: 0, duration: 3}); gsapInstance.timeline({ scrollTrigger: { trigger: ".totem-animal .title", anticipatePin: 1, scrub: true, start: "center 50%", end: "bottom 45%", } }).to(".totem-animal .title .step2", {opacity: 1, top: 0, duration: 3}); gsapInstance.timeline({ scrollTrigger: { trigger: ".totem-animal .title", anticipatePin: 1, scrub: true, start: "center 45%", end: "bottom 35%", } }).to(".totem-animal .title .step3", {opacity: 1, top: 0, duration: 3}); gsapInstance.timeline({ scrollTrigger: { trigger: ".totem-animal .title", anticipatePin: 1, scrub: true, start: "center 35%", end: "bottom 30%", } }).to(".totem-animal .title .step4", {opacity: 1, top: 0, duration: 3}); gsapInstance.timeline({ scrollTrigger: { trigger: ".totem-animal .title", anticipatePin: 1, scrub: true, start: "center 30%", end: "bottom 25%", } }).to(".totem-animal .title .step5", {opacity: 1, top: 0, duration: 3}); gsapInstance.timeline({ scrollTrigger: { trigger: ".totem-animal .title", anticipatePin: 1, scrub: true, start: "center -20%", end: "bottom -100%", toggleClass: "active" } }).to(".totem-animal .title", {opacity: 1, duration: 1}); .title { position: sticky; top: 30vh; z-index: 10; margin: 0 auto 0; background: #000; color: #EEEEEE; font-size: 114px; line-height: 138px; text-align: left; transition: .3s; &.active { opacity: 0 !important; } span { opacity: 0; top: 48px; position: relative; display: inline-block; } } .container .wrapper { z-index: 2; height: 115vh; background: rebeccapurple; } } <section class="totem-animal bg-dark"> <div class="container"> <div class="wrapper"> <p class="title"> <span class="step1">Test</span> <span class="step2">test</span> <br> <span class="step3">one </span> <span class="step4">two </span> IMG_7108 (online-video-cutter.com) (1) .mp4 Link to comment Share on other sites More sharing options...
OSUblake Posted November 17, 2021 Share Posted November 17, 2021 Welcome to the forums @IvanK It's hard to advice on problems without a minimal demo so we can interact with it, but I did notice that you have transition in your CSS. That might be interfering with GSAP. You should be explicit about your CSS transition to ensure it doesn't conflict with a property GSAP is animating. transition: opacity 0.3s; 1 Link to comment Share on other sites More sharing options...
IvanK Posted November 18, 2021 Author Share Posted November 18, 2021 https://prnt.sc/1zz99gh I found the same problem on the main page https://greensock.com/scrolltrigger /, you need to log in from the iphone, safari browser, and scroll up and down diligently Link to comment Share on other sites More sharing options...
GreenSock Posted November 18, 2021 Share Posted November 18, 2021 13 minutes ago, IvanK said: https://prnt.sc/1zz99gh I found the same problem on the main page https://greensock.com/scrolltrigger /, you need to log in from the iphone, safari browser, and scroll up and down diligently I tried Safari on desktop, iPad, and iPhone - zero problems. I scrolled around like crazy. 🤷♂️ I'm not really sure what you're seeing. Please provide a minimal demo (a CodePen, not a live site) with specific instructions about how to reproduce and we'd be happy to take a look. Link to comment Share on other sites More sharing options...
IvanK Posted November 18, 2021 Author Share Posted November 18, 2021 https://drive.google.com/file/d/1vtF2jxbmbCUUbtM3FP1yT29IMlc_x4Wg/view?usp=sharing the picture shifts a bit when I scroll down and up, I found it only from the phone Link to comment Share on other sites More sharing options...
GreenSock Posted November 18, 2021 Share Posted November 18, 2021 Oh, yeah, that's normal - it's because Safari is literally changing the height of the viewport when it shows/hides the browser chrome (address bar). ScrollTrigger waits until scrolling is done before it fires a ScrollTrigger.refresh() to re-calculate the start/end positions. It's not a bug - it's a logic issue. The only way around it that I know of is to wrap everything in a <div> that's position: fixed and have that handle all the scrolling instead of the <body> so that Safari doesn't show/hide the address bar. Obviously you'd need to change the "scroller" on the ScrollTriggers too. 2 Link to comment Share on other sites More sharing options...
jxy Posted November 18, 2021 Share Posted November 18, 2021 I feel the Greensock website is by design not too beginner/user friendly to keep the barriers to entry high haha😜 Link to comment Share on other sites More sharing options...
Cassie Posted November 18, 2021 Share Posted November 18, 2021 27 minutes ago, jxy said: I feel the Greensock website is by design not too beginner/user friendly to keep the barriers to entry high haha😜 Hey @jxy - this is absolutely the opposite of what we want. What makes you feel this way - could you elaborate? Link to comment Share on other sites More sharing options...
jxy Posted November 18, 2021 Share Posted November 18, 2021 53 minutes ago, Cassie said: Hey @jxy - this is absolutely the opposite of what we want. What makes you feel this way - could you elaborate? Hi Cassie, sorry let me take that back. 😅 As a noob, I find everything related to web development overwhelming, not just limited to learning about GSAP. But I do sometimes found the site a bit hard to browse. For example, when I was eating out just now, I took out my phone to log on greensock.com to check out the draggable plugin page. Initially the page didn't load for a long 10 seconds, showing me a page with header and footer but empty content, before it fetches content from server, which then caused what I believe is called Cumulative Layout Shift. When the page finally loads, it looks like this on my chrome/iphone: https://imgur.com/e3Y9ffh Granted, this is not a big issue at all! And I feel soooo grateful for something like GSAP exists to make animation sooo much easier! Ideally though I want the documentation to be like https://tailwindcss.com/ By the way, love your personal website! The design! All the animations are delightful! Especially your avatar animation! I have always been wanting to ask, how did you make the" pens flowing out like water" effect?😃 2 Link to comment Share on other sites More sharing options...
Cassie Posted November 18, 2021 Share Posted November 18, 2021 Don't take it back at all! It's totally valid - we need to work out how to better help you! Our site does need a lot of work on mobile. I agree. Sorry about that. Thanks for the kind words too - the pencils are using this GSAP plugin! 2 Link to comment Share on other sites More sharing options...
IvanK Posted November 21, 2021 Author Share Posted November 21, 2021 On 18.11.2021 at 11:39, GreenSock said: О, да, это нормально - это потому, что Safari буквально меняет высоту области просмотра, когда показывает / скрывает хром браузера (адресную строку). ScrollTrigger ожидает завершения прокрутки, прежде чем запускает ScrollTrigger.refresh () для повторного вычисления начальной / конечной позиции. Это не ошибка - это проблема логики. Единственный способ обойти это, о котором я знаю, - это обернуть все в <div>, что position: fixed, и использовать этот дескриптор для всей прокрутки вместо <body>, чтобы Safari не отображал / не скрывал адресную строку. Очевидно, вам также нужно изменить «прокрутку» на ScrollTriggers. Could you show the solution in more detail using position: fixed Link to comment Share on other sites More sharing options...
GreenSock Posted November 21, 2021 Share Posted November 21, 2021 There's sample code in the helper functions page of the docs: https://greensock.com/docs/v3/HelperFunctions#scrollResize Link to comment Share on other sites More sharing options...
IvanK Posted November 22, 2021 Author Share Posted November 22, 2021 Thank you for your help, GSAP is just great 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now