Jump to content
Search Community

AlexanderGS

Members

  • Posts

    26

  • Joined

  • Last visited

Community Answers

  1. AlexanderGS test
    AlexanderGS's post in How do I make the gsap and scss animations not conflict? was marked as the answer   
    Good afternoon! @Rodrigo
    Yes your option helped!
    But a new problem has arisen. If I set a fixed height: 600px; for the image. Then a value of -270px is added for transform3d. This value depends on the height. For example, if I set the height : 300px, then translate3d(0px, -135px, 0px). So the value is divided by almost 2. Why does this happen?

    SCSS
    .slide-preview-image { position: absolute; top: 50%; left: 50%; max-width: 258px; height: 600px; max-height: 600px; object-fit: cover; z-index: 10; } GSAP
    gsap.set(".slide-preview-image", { yPercent: -45, xPercent: -50, }); gsap.timeline().from(".slide-preview-image", { delay: 2, duration: 1, opacity: 0, y: -300, ease: "power2.easeInOut", scrollTrigger: { trigger: ".slide-preview-image", toggleActions: "play none none none", }, }).to('.slide-preview-image', { repeat: -1, yoyo: true, yPercent: -60, duration: 2, ease: "power2.easeInOut" })
×
×
  • Create New...