Shehzad Asif

@artyor can you make a minimal demo of your problem. It will help us to see the code and find the problem.

Great explanation by @akapowl.

I tried different things but animation does not play at all. It's not as simple as it looks. Hopefully going to learn it today. Let's see what Greenosck says about it.

@Oluwatobiju Judah good to know your progress. I am confused by that or missing something.

Quote

horizontal scroll works well, but annoyingly, my content is still laid out vertically

Try to use "flex-wrap: nowrap" on the section you want move horizontally, that may fix layout but it is just a blind guess.

Aside Note: Each time you make some changes or progress with your demo. Pls fork it and share again.

@Oluwatobiju Judah As I am not familiar with react so not going to mess with it.

You may find below codepen helpful.

See the Pen QWpPvZj?editors=1000 by ShehzadAsif (@ShehzadAsif) on CodePen

Regards,

Shehzad Asif

@OSUblake you nailed it. The best developer community I've encountered ever.

Wao,

I just don't find any platform like this on our planet. It's mind blowing. Thanks this is what I was looking for.

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

Thanks all for your amazing support.

Jack I got it, it's an expected behavior in that scenario. Thanks for clarification.

Quote

you can get a bit hyper-focused and hung up on what the transitionary states look like.

 @Cassie I agree as I used to focus on very tiny tiny details that nobody worries in the real world. I am overdoing it sometime. Thanks.

I am sorry that question is not related to gsap but as an opportunity I would like to ask what platform you guys recommend for cross browser testing like lambda or what.

Ok, I made a scenario that is quite similar to my situation. Here you can see that I have a pin img at desktop nothing at below 1024px. Same as above If I switch between these breakpoints you can see the content shifting that is due to that pinSpacing. 

See the Pen KKWpyBW?editors=0110 by ShehzadAsif (@ShehzadAsif) on CodePen

1 -It is not related to david issue.

2- I was using chrome in incognito mode so no cache, with latest beta.

3- I found the issue, the displacement is causing due to margin of an element on desktop. I made a minimal demo for understanding. when you switch from desktop to 1024px, you will notice that window will scroll to last image instead of img-3 as it has 200vh margin on desktop and none at below 1025px. if you switch back to desktop it will go back to img-3.

See the Pen ExWjmbg?editors=0110 by ShehzadAsif (@ShehzadAsif) on CodePen

Regards,

Shehzad Asif

On codepen I don't see that issue, that's right. Actually I tested it on my project on localhost so may be some other code causing it, not sure. Will check and test again.

One thing is that I observed that issue on a device that have both breakpoints like ipad pro, (portriat width: 1024px. landscape width: 1366px). If a device that have these both breakpoints then that issue appears to me. Other then that do not observe that issue. Just a point.

@davidbwaters Good to hear that. Feel free to post your questions on the forum in future and the community will try to help around.

Hi Jack

I used the above beta. Resize issue is there when rotating the device (test locally on chrome dev tools).

Hey

If above conversation hurt you in any way. I apologize for it.

Is it like what you want. I put the missed classes on mask and used fromTo instead of from / to.

See the Pen gOmpPQG?editors=0010 by ShehzadAsif (@ShehzadAsif) on CodePen

No need to sorry.

Quote

I just wanted a minimum viable example of matchmedia being applied and i intentionally didn't add mobile styles in the codepen

Minimal and complete demo can save time to all of us.

Quote

I am not new to CSS at all

No offend at all. Do not take it hard.

Quote

but my issue persists in your updated demo

I noticed that you did not used "c-fluid-reveal__wobble" class on all of your mask path. Pls check your demo again and see if anything missing.

You can use ST refresh when required. It was not required as per the demo.

A side note, do not post your problem in other people's thread, it is against the forum policy and can be confusing for other people. Once you post the issue here, wait for the people to respond and stick to your thread.

Oh man,

I am doubting on your skills (no offend). You are bringing a problem here but do not know even how to do CSS and not following the guidance.

1- Your grid elements are absolute position in desktop overlaying each other. No media query for mob version. I set them position relative in mob so they are in line.

2- you are using mask over images for that effect but not removing that mask from the images in mob version so they are visible in mob. I removed that.

3- I told you to savestyles for all the elements effecting by the tween. You did not savestyels for the images. I did that.

4- I recommended you to go through the post mentioned by Cassie. I do not think you did that.

I did that your work and now everything is working as expected.

At least try to do the work on your end so that problem is more visible clearly and can be solved without doing extra work on our end.

Quote

but either way, even without savestyles, the way i was attempting before to use ScrollTrigger.refresh(), according to docs, should recalculate things the same way it does on load, correct?   i don't understand why i can't force it to restart when i need it to.

I told you before that you do not need to use refresh function for your specific case bcs ST itself recalculate things on resize so no need for that.

Anyhow below is the working demo. I hope now it is as you expected.

See the Pen BaWNoRy?editors=0010 by ShehzadAsif (@ShehzadAsif) on CodePen

Happy coding

Regards,

Shehzad Asif

No, problem, you can assign a single class (for example "initial-state" class for all elements effecting by tweens) for reference to each mask/ svg and img. Set the initial state of elements as you want on mobile. Use 

ScrollTrigger.saveStyles('.initial-state'); // before using matchmedia

and I am quite sure that it will solve the problem.

I would strongly suggest you to go through the post cassie posted above, try to understand the logic. Your situation is quite similar to that.

Give it a try.

@davidbwaters It looks like that your problem is related to matchmedia setup. What I suggest is that you use the latest beta of ST from "Cassie" reply. And use

ScrollTrigger.saveStyles('your targets') // target are the selectors you are usign in your tweens or timelines in matchmedia function

before matchmedia.

You do not need to kill tweens chained with ST under matchmedia functions. They are killed itself when that breakpoint is not in use.

I hope this will solve your issue.

Regards,

Shehzad Asif

@akapowl Now I tested it repeatedly like continuously for 30 to 50 times back and forth resizing then I am able to see it for 2 times that jumping issue (quite hard to reproduce "probability of 2 from 30/50") but yes that effect is there.

I just implemented the latest beta in my project on localhost (now that value revert issue is gone), and I can confirm that powl is right on resize content does not remain on previous position some time, it jumps/ scrolls to some other position.

@akapowl 

Quote

I forked your demo and commented out "all: function" media query. It is causing the scroll effect on resize as in my/ your demo. Now that window scroll effect is gone.

See the Pen YzZPEEo by ShehzadAsif (@ShehzadAsif) on CodePen

It is quite weird, I do not see that resize issue again in your codepen either after commenting out "all" media query. 

Thanks

Hey Jack

Awesome, Now the behavior is as expected. You guys are awesome every time. I would like to have 2 questions as add on.

1- When this beta can be used/ released officially so I can use in my project.

2- Is it possible that irrespective of the breakpoint once the tween is played ,it does not play later on each time I resize. I used "once: true" has no effect (tried although it was not going to work in this way as per documentation). The tween plays each time I resize from 1025px breakpoint to back and forward.

And yes, Thanks for the amazing support.

Regards,

Shehzad Asif