Jump to content
Search Community

Different duration for tweens in the tween

Shehzad Asif test
Moderator Tag

Go to solution Solved by _Greg _,

Recommended Posts

Hi There

 

I got a situation, where I am wondering if there is any way to use different durations for a tween without using ST matchmedia function inside the tween, for example I want a duration of 5sec tween on desktop and 1 sec tween on mobile as in my demo. I can do that by using ST matchmedia function but imagine I have a timeline where I only want to change duration of that timeline/ tween based on breakpoints and rest remains the same. With matchmedia I will be repeating such code just for duration changing not a dry approach. I tried to implement it through function but did not worked. Any guidance on that.

 

Regards,

Shehzad Asif

See the Pen mdWVomK?editors=1010 by ShehzadAsif (@ShehzadAsif) on CodePen

Link to comment
Share on other sites

  • Solution

Hi. 

You can change duration any time you want with .duration() method Documentation

 

gsap.registerPlugin(ScrollTrigger);
let animation = gsap.fromTo(
  "h1",
  {
    yPercent: 300,
    autoAlpha: 0
  },
  {
    yPercent: 0,
    autoAlpha: 1,
    duration: 5,
    ease: "none",
    repeat: -1
  }
);

let changeDuration = () => {
  if (window.matchMedia("(min-width: 801px)").matches) {
    // >801px
    animation.duration(5);
  } else {
    // <800px
    animation.duration(1);
  }
};


changeDuration(); // call function any time you want

// change duration on resize window
window.addEventListener( 
  "resize",
  function (event) {
    changeDuration();
  },
  true
);

 

  • Like 3
Link to comment
Share on other sites

7 hours ago, Shehzad said:

With matchmedia I will be repeating such code just for duration changing not a dry approach

 

If you're repeating code, that probably means a function could help you out.

 

Like you could pass in the duration....

 

ScrollTrigger.matchMedia({
  "(min-width: 800px)"() {
    const animation = createAnimation(5);
    // Return a function that'll get called when the breakpoint no longer matches so we can kill() the animation (or whatever)
    return () => animation.kill();
  },

  "(max-width: 799px)"() {
    const animation = createAnimation(1);
    return () => animation.kill();
  }	
});

function createAnimation(duration) {
  return gsap.fromTo(
    "h1",
    {
      yPercent: 300,
      autoAlpha: 0
    },
    {
      yPercent: 0,
      autoAlpha: 1,
      duration: duration,
      ease: "none"
    }
  );
}

 

The solution by @_Greg _ is good. The only suggestion I would make is to not use resize event listeners as they will constantly fire on every resize. Media query listeners will only fire when the media changes.

 

const animation = gsap.fromTo(
  "h1",
  {
    yPercent: 300,
    autoAlpha: 0
  },
  {
    yPercent: 0,
    autoAlpha: 1,
    duration: 1,
    ease: "none"
  }
);

const mql = window.matchMedia("(min-width: 801px)");
mql.addEventListener("change", onChange);
onChange(mql)

function onChange(e) {
  if (e.matches) {
    animation.duration(5);
  } else {
    animation.duration(1);
  }
}

 

 

  • Like 5
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.
×
×
  • Create New...