AbhishekSock
Members-
Posts
8 -
Joined
-
Last visited
About AbhishekSock
- Birthday October 12
Profile Information
-
Location
New Delhi, India
-
Interests
gaming, running, reading, front-end, browsing, meditating.
Recent Profile Visitors
2,224 profile views
AbhishekSock's Achievements
6
Reputation
-
timelinemax Need help figuring out TimelineMax properties?
AbhishekSock replied to AbhishekSock's topic in GSAP
Thank you so much @Sahil and @OSUblake . You people just saved my job. The whole idea of letting the responsive design go really helped me to make the website responsive and all I did was just rearrange certain things and animation. Thanks again. -
timelinemax Need help figuring out TimelineMax properties?
AbhishekSock replied to AbhishekSock's topic in GSAP
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:- 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". -
timelinemax Need help figuring out TimelineMax properties?
AbhishekSock replied to AbhishekSock's topic in GSAP
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. -
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(here) 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(here) 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.
-
timelinemax Looking for a little help with TimelineMax?
AbhishekSock replied to AbhishekSock's topic in GSAP
Thank you so much, Sahil ji. I will definitely keep that in mind. Labels really helped. Appreciated. -
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. tl .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.
-
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. Update: finally achieved the exact effect I am looking for. Thanks to the burger animation and Carl's suggestion. Greensock rules.
-
AbhishekSock changed their profile photo
-
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. Thanks.