bootstrap007

As you mentioned the animation is not correct as expected. Just something is happening as in the below CodePen https://codepen.io/bootstrap007/details/wvKqrob

Sure, From next time will do the same with Codepen. So how to fix this one? any solutions?

Hi, I have updated the versions of GSAP and DrawSVG plugins. Also, updated the timeline but still showing some sort of error in the console. https://codepen.io/bootstrap007/pen/abvyBLV

Hi, Can anyone pls tell me what mistake i am making in this demo and why it is not working? https://codepen.io/bootstrap007/pen/abvyBLV

Hmm... I thought no need to use/embed all the files (DrawSVGPlugin, MorphSVGPlugin) separately like TweenMax, Timeline etc in the latest version of GSAP. ?

Hi All, How to reveal any SVG shape something like a mask effect or drawing? Kindly check the SVG in Codepen. I would like to reveal it from one side to other like a drawing. how to do this in GSAP3.2.4? Thanks

@Shrug ¯\_(ツ)_/¯ Thanks for sharing the reference. ?

.

Hi ZachSaucier Thanks for your time & support. I know about barba.js and the page transitions effects. You first need a way of keeping track of the position of the clicked on element. You could do that in various ways, but likely the best is to use some sort of data representation of the position state. -- Do you have any example for this please? My question was - If you click a portfolio item from the CENTER of the page then on the NEXT PAGE that item is animating exactly from the center of the screen/page( triggering the position value from the previous page) OR if you click a portfolio item from the left side of the page then on the next page it is starting the animation exactly from that left postion (same as in the previous page). This can be done in Gsap or with the help of Jquery only? Thanks Zack

Hi All, Hope everyone is doing well and safe during this outbreak. I have a query. As you can see in the below mentioned portfolio URL that If you click a portfolio item from the CENTER of the page then on the NEXT PAGE that item is animating exactly from the center of the screen/page( triggering the position value from the previous page) OR if you click a portfolio item from the left side of the page then on the next page it is starting the animation exactly from that left postion (same as in the previous page). Is it possible to do this in GSAP? How to trigger the object position from the previous page ? Any ideas would be much appreciated. https://emanuelemilella.com/works Thanks

haha... ?

Hi, Currently the zoom out animation is starting from the red box not from the yellow circle which is inside of the red box and also the yellow circle is not full screen when the page loads. Please check the CodePen demo what i have tried so far:- https://codepen.io/bootstrap007/pen/GRJgNxz

Hi @ZachSaucier, Yes, exactly. Yellow circle covering the screen completely (full screen) so that red won't be visible when the page loads and from that point the zoom out animation starts. I have attached a sketch mockup for better understanding. Kindly refer demo.jpg

Hi, As you can see in the CodePen demo the red color box is doing a zooming out animation. Is there a way to do that the yellow circle's size should be 100% of the screen when the page load and then it zoom out to the actual size of the red box ? And also, the zoom out animation should start from the yellow circle. https://codepen.io/bootstrap007/pen/GRJgNxz Thanks in Advance.

Hi ZachSaucier, Oh! My bad. I didn't notice the 2nd background was going outside of the screen. ?Well noted all the points and you have explained in detail. Thank you so much for the continued support. ???

Hi, I am looking to change the background images after each animations like in the CodePen. As you can see that 1st background Image is appeared then the 2 boxes are also animated and then the background image fades out from the page. Until there it is working fine. But after the 1st background is disappeared then the 2nd background image is not appearing before the 2 boxes animation starts again. How can I achieve this kind of thing? Thanks in Advance

@ZachSaucier Wow! Thanks & really appreciated. ? You are really awesome and once again thanks for the great support! ??

Hi, I have created another CodePen (https://codepen.io/bootstrap007/pen/BayqRjB) and this will make it clear for you. As you see the rotation animation is repeating continuously until the another 2 boxes appear on the screen. After the completion of animating those 2 boxes (left & right side ones) on the screen then the rotation of the center box should stop or pause it. That's exactly what i am looking for. https://codepen.io/bootstrap007/pen/BayqRjB

Yeah, Something like pause it (rotation) after a while and then I would prefer this one to animate and move away from screen.

Hi ZachSaucier, Thanks & Hope you are doing great! This is great. It works perfectly fine. Also, how can I pause or stop the animation after a while?

Hi All, How to make it the reverse animation once the object's rotation is finished? And i am looking for the repeated loop continuously. Finally If I would like to stop/pause it after a while ? https://codepen.io/bootstrap007/pen/QWwZGQd

Hi @ZachSaucier , Hope you are doing well. Basically I am trying to create a small football juggling character animation here. If you check the below CodePen demo in a laptop then you will see the bouncing of the ball on the ground is correct or ball is pitching on Character's Head is also correct. But if you check this on a bigger screen Mac or in mobile the Pitching point of the ball is not exactly on ground or on the character's head. Kindly check the attached screenshot (character.jpg). I am looking for a solution that how to correct it for all the different screens? Is there anything in GSAP may be something like CSS Media Queries for different screens or any other solution? Hope this explanation, CodePen demo and screenshot will make you much more clear. I just wanna make the animation looks same for all the screens or devices. https://codepen.io/bootstrap007/pen/gObvbvR

Hi @mikel & @ZachSaucier Hope you both are doing well. Thank you so much for the support. You both are awesome! I have created a demo CodePen for what exactly I am trying to do here. Kindly check the below codepen. As you can see the ball is falling down from top to the ground correctly on my laptop screen but when I resize the window to a mac resolution then the bouncing point is different from the ground. After the bouncing the ball is moving upwards and then coming back to the character's head and stay there which is correct in Laptop screen but not correct in other screens like MAC or Mobile. If you resize the window then you will see the ball's settling point keeps varying in different screens not exactly on head of the character. Any solutions for this? https://codepen.io/bootstrap007/pen/ZEYvNeb

Hi @mikel , Thanks for your support. ? This is something interesting! You mean to say no need to use different codes like media queries for different screens. This code will automatically check and act as per the window screen?

Hi All, I would like to know that GSAP Animations will be accurate in responsive mode? GSAP animations are based on pixel values and using absolute positions. So these pixel values may vary according to the different screen sizes and the result will be also different on screens (the starting point and the end point of animations)? For example I am working on a MAC and if I have a ball which is falling down to the ground from top ( y: -500) and the ground height is 100px which is in the bottom. I have adjusted the ball's falling down measurement according to the MAC screen but if I'll check the same in a smaller screen or in mobile the bouncing point of the ball will be slightly different than from the ground? Do we have anything in GSAP to sort it out like In CSS we have media queries? Or any other solutions?