Jump to content
GreenSock

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

Remove/add timeline animation when the window inner width is greater/lower than a breakpoint

Go to solution Solved by elegantseagulls,

Recommended Posts

I'm trying to remove a timeline animation below 940px or add it above 940px. I want the animation to be removed or added on resize or when the mobile orientation is changed. Here is my code:

const scrollTrigger = {
    trigger: '.js-hero-pin',
    start: 0,
    end: 700,
    scrub: true,
    pin: true,
    pinSpacing: true,
    anticipatePin: 1,
    toggleActions: 'play pause reverse pause'
  }

  let timeline = gsap.timeline()
  function timelineAnimation() {
    if (document.querySelector('.js-hero-video')) {
      timeline.from('.js-hero-video', {
        position: 'fixed',
        top: 0,
        right: 0,
        left: 0,
        width: '100vw',
        height: '100vh',
        scrollTrigger: scrollTrigger
      })

      timeline.to('.js-hero-text', {
        opacity: 0,
        display: 'none',
        scrollTrigger: scrollTrigger
      })

      timeline.from('.js-hero-content', {
        marginTop: '100vh',
        scrollTrigger: scrollTrigger
      })

      timeline.to('.js-hero-content', {
        opacity: 1,
        scrollTrigger: scrollTrigger
      })

      timeline.from('.js-sticky-bar', {
        display: 'none',
        zIndex: -1,
        scrollTrigger: {
          start: 400,
          end: 700,
          scrub: true,
          toggleActions: 'play pause reverse pause'
        }
      })

      timeline.to('.js-sticky-bar', {
        opacity: 1,
        scrollTrigger: {
          start: 400,
          end: 700,
          scrub: true,
          toggleActions: 'play pause reverse pause'
        }
      })
    }
  }
  window.addEventListener('load', () => {
    if (window.innerWidth > 940) {
      timelineAnimation()
    }
  })

  window.addEventListener('resize', () => {
    if (window.innerWidth <= 940) {
      if (timeline) {
        ScrollTrigger.disable()
      }
    } else {
      timelineAnimation()
      ScrollTrigger.enable()
    }
  })

When I resize the window or change the mobile orientation, I'd like to remove or add all the animations, with all the CSS properties.

Link to comment
Share on other sites

Great, thank you so much!

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×