Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by AbhishekSock

  1. Sahil Ji, thank you for your response.

    I have tried the first method you have mentioned by making the entire scene responsive(used CSS grid for that) and then tried using only "from"  by calling classes as elements. But I don't get the desired results, please have a look below:-

    See the Pen qpdjZY?editors=1010 by abh19021 (@abh19021) on CodePen

    The result I am looking for is this - > https://codepen.io/abh19021/pen/RxPVMy (also made by me by using "to" but isn't responsive).


    Please note that I will be disabling GSAP on mobile devices. I want the results by only using "from".

  2. Thank you so much for the very detailed information. I have looked into it and replaced certain things and it is working fine. 

    What do you suggest for height and width though? I have tried scaleX and ScaleY but since my images are the background of my DIVs, they come out very stretched and looks very ugly.  I want a panel to change from full-width and full-height to 50% width and height will be the same. 

  3. This question is in reference to a previous question  I've asked here on the forum.

    I wanted to achieve the similar transition effect as shown in SCABAL and thanks to the suggestion of @Carl , I was able to achieve the same effect with help from TimelineMax. However, I believe the method I used isn't very responsive friendly. Becuase in order to achieve the similar effect as shown in scabal.com, I tried doing it with TimelineMax(

    See the Pen RxPVMy?editors=0110 by abh19021 (@abh19021) on CodePen

    ) and used relative and absolute positioning which completely messed up my mobile responsiveness.


    To counter this, I have used CSS grid and made a layout which is responsive(

    See the Pen qpdjZY?editors=1100 by abh19021 (@abh19021) on CodePen

    ) but I am not able to achieve the same effect using TimelineMax(with CSS Grid) and I can't / don't want to use relative and absolute position in this case.


    I believe, if I use from( ) and bring the panels to the default state, I will have the effect I am looking for.


    TLDR: How can I achieve the same effect(as shown in Scabal when you scroll down) only by using from( ) and set( ) method? I've tried but I couldn't get it right.


    Thank you so much for your time. Help is really appreciated. This is bugging me for quite some time now.

    See the Pen by abh19021 (@abh19021) on CodePen

  4. 19 minutes ago, Sahil said:

    Always try to post a demo even if it isn't working, sometimes problem can be completely unrelated to JavaScript so it is easier to find it plus we have something to work with.


    What you need is labels, you can pass string as label and any tweens with same labels will start together irrespective of their position. You were doing it mostly correct though just wasn't using labels correctly. Following are two tutorials that will explain in depth,






    See the Pen eePXRL?editors=0010 by Sahil89 (@Sahil89) on CodePen


    Thank you so much, Sahil ji. I will definitely keep that in mind. Labels really helped. Appreciated.

    • Like 2
  5. First of all sorry for not posting codepen URL, for some reason, my code isn't executing on codepen.


    Below is the TimelineMax code I prepared for the kind of animation I need.


          .to(panel1, 0.3, {width:'50%',ease:Power3.easeOut})
          .to(panel2, 0.3, {left:'50%', ease:Power4.easeOut},panel1)
          .to(panel2, 0.3, {height:'50vh',width:'25%', ease:Power1.easeOut})
          .to(panel5, 0.3, {width:'25%',height:'50vh',left:'75%'},panel2)
          .to(panel3, 0.3, {top:'50%'},panel2)
          .to(panel3, 0.3, {width:'25%',height:'50vh'})
          .to(panel4, 0.3,{left:'75%',width:'25%',top:'50%'});

    You could see how panel2 and panel3 have more than one ".to"  that is because of the kind of animation I need where panel2 should first get to 50% left and then get to 50vh height, 25% width. Now, I want panel5 to follow along with panel2 but not the first panel2 but the second one. How can I target only the second panel2 (the one with height: '50vh', width:'25%') for the panel5?

    Hopefully, it makes sense to you.


    Thank you so much in advance. Any help is appreciated.

  6. Thank you so much, Carl. I will check it out and I will keep you posted here. I have seen your replies in many other posts and you are doing a great job helping newbies like me.


    finally achieved the exact effect I am looking for. Thanks to the burger animation and Carl's suggestion. Greensock rules.

    • Like 2
  7. I am really blown away by the animation in Scabal and epic (developers of scabal.com.) I am trying to figure out the transition they have when you see on your first scroll. The way the columns get adjusted in a cool way is amazing.

    I am a newbie front end developer and I am making my feet wet in animation. I've tried to achieve the same effect by using animate.css, AOS and AnimeJs but no luck so far but I am positive that I can use greensock to achieve similar effect.

    I request someone to please let me know how can I do it. I am not looking for code but I am looking for a tutorial or any methods used in greensock by which I can have the exact same effect.