bootstrap007

On 4/29/2020 at 10:36 PM, PointC said:

Take it one step at a time. First off, try moving the "drawIt" polygon outside of the mask/defs and see if it will animate correctly with the drawSVG plugin. 

 

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

 

 

 

6 minutes ago, ZachSaucier said:

Please use the "fork" button in the bottom right of CodePen when saving new versions to post to the forums here. That way people in the future looking through the thread will see the same things that we see.

 

There are no errors in the console related to your code. As Craig said, the code is not doing what you want it to do but that's unrelated to any errors that you see.

Sure, From next time will do the same with Codepen.

 

So how to fix this one? any solutions?

 

 

19 minutes ago, ZachSaucier said:

Look in your dev tools console. It says "Invalid property drawSVG set to 0 Missing plugin? gsap.registerPlugin()" which means that DrawSVG is not being loaded. This is because you're loading the v2 version of DrawSVG while you're loading GSAP 3. Make sure the versions are the same (we recommend GSAP 3 along with its syntax - no need for Max/Lite any longer, etc.).

 

I recommend using the GSAP starter pen to start CodePens with GSAP:

 

 

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.

 

 

See the Pen abvyBLV by bootstrap007 (@bootstrap007) on CodePen

 

 

 

 

Hi,

 

Can anyone pls tell me what mistake i am making in this demo and why it is not working?

 

See the Pen abvyBLV by bootstrap007 (@bootstrap007) on CodePen

 

 

 

1 hour ago, ZachSaucier said:

Why not use 3.2.6? Just curious.

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

See the Pen abvyBLV by bootstrap007 (@bootstrap007) on CodePen

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

.

2 hours ago, ZachSaucier said:

Of course it is! 

 

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. 

 

Then you need to transition between pages using that information. You should look into Barba.js to help you with handling page transitions and potentially posts on how to use GSAP with Barba. That's it  

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:-

 

See the Pen GRJgNxz by bootstrap007 (@bootstrap007) on CodePen

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.

 

 

Thanks in Advance.

 

See the Pen GRJgNxz by bootstrap007 (@bootstrap007) on CodePen

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

See the Pen gObJEGK by bootstrap007 (@bootstrap007) on CodePen

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

Hi,

I have created another CodePen (

See the Pen BayqRjB by bootstrap007 (@bootstrap007) on CodePen

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

 

See the Pen BayqRjB by bootstrap007 (@bootstrap007) on CodePen

 

 

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 ?

 

 

 

See the Pen QWwZGQd by bootstrap007 (@bootstrap007) on CodePen

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.

 

 

See the Pen gObvbvR by bootstrap007 (@bootstrap007) on CodePen

 

 

 

  

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?  

 

See the Pen ZEYvNeb by bootstrap007 (@bootstrap007) on CodePen

 

 

 

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?