Jump to content

Shehzad Asif

  • Posts

  • Joined

  • Last visited

Posts posted by Shehzad Asif

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


    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.

  2. 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.



    Shehzad Asif

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

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



    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.

    • Like 2
  4. 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



    Shehzad Asif


  5. 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.

  6. No need to sorry.



    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.



    I am not new to CSS at all

    No offend at all. Do not take it hard.



    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.

    • Like 1
  7. 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.


    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



    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.

    • Like 3
  9. @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.



    Shehzad Asif

    • Like 1
  10. @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.

  11. 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.



    Shehzad Asif