Jump to content
GreenSock

IvanK

Members
  • Posts

    5
  • Joined

  • Last visited

IvanK's Achievements

  1. 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
  2. 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
  3. 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
×