Help with fromTo() tween on mobile

[JAguVillar]

Hello! I am very new around here, learning gsap fow a couple of weeks now, and now I am implementing Scroll Magic into the mixture, and it works like a charm!

I have one problem right now, I have this tween, with this parameters:

let t1 = gsap.timeline();

  t1.fromTo(".strawberry", 4, {

    y: 0,

    x: 0,

    autoAlpha: 0

  },

    { y: 150, x: 500, autoAlpha: 1, ease: Power3.easeInOut })

 

I am trying to move my "strawberry" class element from those coordinates (0, 0) to (150, 500), in the desktop layout it works just fine, but in a mobile layout, it doesn't, it moves the 150 and 500 units, obviously in mobile layout is a lot, so the element goes far away.

 

How can I set responsive values to my x and y parameters? Or what solution do you recommend?

 

Thanks and sorry for my English, keep to good work devs!

[ZachSaucier]

Hey JAguVillar and welcome to the GreenSock forums!

 

You can use whatever units you'd like in the tween. For example you could use the xPercent and yPercent properties to move the position relative to the size of the element's dimensions. Or you could use x: "50vw" or something like that to move relative to the viewport's dimensions. GSAP gives you complete freedom of what units to use. Just choose what works for you  Using responsive units is one of the tips in my article on animating efficiently (I highly suggest reading the whole thing).

 

Side notes:

• In GSAP 3, we recommend putting the duration inside of the vars parameter. In the case of .fromTo()s it should go in the toVars parameter (along with your ease).
• In GSAP 3, we recommend using the condensed string form of eases. For example your ease above could be just ease: "power3.inOut"
• As for ScrollMagic, we don't really recommend using it. In fact, GreenSock is developing it's own scroll plugin! We hope to release it in the next couple of weeks.

[JAguVillar]

1 hour ago, ZachSaucier said:

Hey JAguVillar and welcome to the GreenSock forums!

 

You can use whatever units you'd like in the tween. For example you could use the xPercent and yPercent properties to move the position relative to the size of the element's dimensions. Or you could use x: "50vw" or something like that to move relative to the viewport's dimensions. GSAP gives you complete freedom of what units to use. Just choose what works for you  Using responsive units is one of the tips in my article on animating efficiently (I highly suggest reading the whole thing).

 

Side notes:

• In GSAP 3, we recommend putting the duration inside of the vars parameter. In the case of .fromTo()s it should go in the toVars parameter (along with your ease).
• In GSAP 3, we recommend using the condensed string form of eases. For example your ease above could be just ease: "power3.inOut"
• As for ScrollMagic, we don't really recommend using it. In fact, GreenSock is developing it's own scroll plugin! We hope to release it in the next couple of weeks.

Amazing and thank you for answering!

I watched your aritcle but I must oversaw the part of responsive units.

I will stop working with scroll magic then and I'll wait for your plugin instead, I am sure that it will work 11/10 like gsap!