[How would you recommend ding this scroll effect?]

Hello! I was wondering how could I implement the scroll effect of this page
https://timestwo.design/spacefor
It is possible using gsap?

[Need help to recreate desire effect with scrolltrigger :(]

Sure, I added just a little, the scrolltrigger for pinning the desire section, I will reformulate my desire behaviour, I want to have a scrolltrigger for pinning the desire section, and one scrolltrigger for each "card" inside the container, each card ,I think, should have a scolltrigger too, because what i want to do is, when the scrollbard passes truough each one, it must trigger a method that I have, and when the scollbar reaches the end of the pinned section it should continue the normal scroll.

See the Pen XWyJPQj by Agoto (@Agoto) on CodePen

[Need help to recreate desire effect with scrolltrigger :(]

Please help!
In my  codepen I have a minimal structure of my website, the spacer classes are other sections, the dont have importance, the container class is wer I am having trouble trying to achieve what I want, what I want to achive is:
using scrolltrigger (I suppose), when the container reaches the center or top of the viewport, I want to pin it, and unpinned it when desire animations on the grey boxes end, for example: reach the container while scrolling, when reached, pin it, the user should keep scrolling and, for example, each grey box should do something, I gues inside a timeline, when the timeline ends I need to unpin the container and keep scrolling.

I don't know if I was clear in the explanation, and I dodn not put ant js code because a). it doesnt work as desired and b) I think the ones thant answers this will do  a much better work than I do!

Thx in advance for the help!

See the Pen oNQgEpP by Agoto (@Agoto) on CodePen

[Help with desired behavior!]

Hello!

I wnna know how could I achieve something like the lateral pannels in this page, I think that what this web page is doing is making the items sticky for a certain scroll length , how would you achieve it? using scrolltrigger?

[Help with fromTo() tween on mobile]

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!

[Help with fromTo() tween on mobile]

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!