[Need help with card animation!]

No problem sir. Our company decided to use another libraries. Thanks.

 

[Need help with card animation!]

4 hours ago, ZachSaucier said:

Hey Leo. You can look at the transforms applied to the cards in different states in that site and animate the same transforms in your project. Unfortunately we don't have the capacity to do it for you but feel free to ask if you have any specific questions  

Hello Zach!

Thank you so much for suggestion. I have done the beginning part of animation but struggling with end animation. So if you see my codepen which is updated, when you click on the "Next' button and cards will rotate and place on the top but after clicking on the card I want to move them to the left or right side and rotate back to close. Means if you see that website when you click on the next question button, how it smoothly animate to the left side and close again. 

Could you please help me to achieve only that end part? That is the part only remain now.

[Need help with card animation!]

Hello everyone,

I have been trying to achieve the similar kind of card animation for one of my project. Please click on this link to see card animation effect: 

http://knowlupus.org/

 

The way card gets open and close in this game, I want to create exact same effect. I have also attached the codepen link. Is anyone can suggest me how can I achieve this? At least suggest me any resource or idea to achieve this.

Your help is much appreciated.

See the Pen bGErNad by LeoZoe (@LeoZoe) on CodePen

[Div and image should start expanding from button position after clicking on plus button]

Thank you Craig for sharing these threads but they all are simple accordion examples. I already search for threads similar to my animation (one link shared in description). But when I tried the same thing it was not working correctly with my example. So I was curious to know how I can use GS for my example. 

Threads you shared are very simple accordion examples and I can create better than those. But the beach example looks very cool and I will try to create that myself. Thanks though for sharing and your time.

 

[Div and image should start expanding from button position after clicking on plus button]

Hello all,

Is there any way if we can create the animation effect shown in the following link: https://uimovement.com/design/beaches-app/

I have saw some examples (https://greensock.com/forums/topic/14206-full-screen-a-div/)  for the same effect but I'm not able to use timeline correctly I guess.

 

Can someone help me please?

 

 

See the Pen WVpVVR by LeoZoe (@LeoZoe) on CodePen

[How to create expand button from its current position to fullscreen?]

Hello GreenSockers,

 

You guys are so awesome and thank you for providing this platform. Today, I saw this beautiful accordion animation

 

https://uimovement.com/design/beaches-app/

 

and I want to create the same effect using GS.

 

Is it possible to create this effect using in GS? Thanks in advance.

See the Pen gVgNxd by LeoZoe (@LeoZoe) on CodePen

[Select div box on click and place into another box on click]

Thanks Mike,

 

Actually, it is started to moving on click but I want to select it on click and when I click on any empty box, then it will be moved into that box. Also, placement is random so I will try applying some math now.

 

Also it would be great if you help me with that too.

 

[Select div box on click and place into another box on click]

Hello GreenSock community,

 

I'm trying to implement one functionality opposite to drag and drop. 

I want to select div on single click and place it on click on any empty place boxes. So both things should be done by using single mouse click.

Can anyone guide how can I achieve this using GreenSock. Thanks in advance.

 

See the Pen qLvQbO by LeoZoe (@LeoZoe) on CodePen

[How can I move these four circles back and forth along SVG path at the same time?]

? You guys are really amazing! I'm so thankful for everything! 

And yes its really motivating me to learn GreenSock in deep!

Thank you so much, guys!  

[How can I move these four circles back and forth along SVG path at the same time?]

Thank you, Mikel! 

 

The above example is really nice but I'm just a beginner and cannot understand it completely. But still, I'm trying to solve this myself by reading about it. 

I will try my best but I will be also appreciated if you can help me in achieving this too!

 

There is one more thing I would like to mention that, all circle should not follow the whole SVG path, they should move some distance and reverse (such as a pendulum).

[How can I move these four circles back and forth along SVG path at the same time?]

Hi, GreenSock community,

 

I have actually a one SVG image and four circles on it. What I'm trying to achieve here is, move four dots along the SVG path back and forth.

Is there any way we can do this using GreenSock? I'm also actually reading about MorphSVG plugins and checking the below example.

So, would you guys please help to make this animation. Thanks in advance.

 

See the Pen GopRwQ by GreenSock (@GreenSock) on CodePen

See the Pen QJxzNM by LeoZoe (@LeoZoe) on CodePen

[How to improve shake effects (Turbulence kind of effect)?]

I have created 3 types of shake effect but they are not  looking what I am trying to make them. I am trying to create basic, horizontal, and constant shake effect like shown in below website: (Mostly preferring to create a plane shake effect when its in cloud or in storm).

https://elrumordelaluz.github.io/csshake/ 

Can anyone help me to improve my animation effects?

Thanks in advance!

See the Pen wYedpg by LeoZoe (@LeoZoe) on CodePen

[Rotate the card and increase circle radius while dragging the card]

Wow! You guys are really genius!

I really want to like you one day! Thanks for helping me out!

I also achieved the same and I will share you my working codepen with you too!

[Rotate the card and increase circle radius while dragging the card]

Hey,

Yes exactly I want the same if I drag card to the left or right direction, circle radius should get increase and card start rotating. If I stop dragging, it should pause the animation. When I start returning to the center it should reverse the animation means decrease circle radius and reverse card flipping too. Please can you help in this. I have actually done this but not exactly the same thing I want.

[Rotate the card and increase circle radius while dragging the card]

Hello I want to rotate the card and increase circle radius at the same time while dragging the card.

 http://ladybird.movie/quiz

 

I have forked my codepen and I am working further on that. So anyone free to edit this codepen and help me to achieve this.

Thanks in advance.

See the Pen NLjNyG by LeoZoe (@LeoZoe) on CodePen

[Swipe cards using Greensock]

Sorry Sahil but one more question about Draggable. Is there any way we can disabled drag event after swiping the cards and enable it. I read about disable() and enable() methods. But did not understand very well!

[Swipe cards using Greensock]

Thank you so much for your all help Sahil!

 

[Swipe cards using Greensock]

Actually, I have read through the both links but did not understand very well and I was not aware that I have to trigger buttons too. But thank you so much for your help and valuable feedback at the end. I'm trying hard to learn this all. Just one more thing, I guess I need to download "Draggable" plugins to achieve this. Am I right?!

[Swipe cards using Greensock]

Hi Sahil, thank you for your help. I tried to put draggable code top of my demo code. It shows drag area between two cards but not actually dragging slides just like your below codepen demo. Can you please check my above codepen. would you also please show me how to do below swiping in my carousel (above codepen already updated).

See the Pen gGLaMv by Sahil89 (@Sahil89) on CodePen

 

[Swipe cards using Greensock]

Hello all, How can I swipe these cards on desktop and touch devices using GreenSock?

I'm trying to apply swipe effect on cards and move cards same as clicking on next and previous button. Anyone help me with that?

Thanks in advance.

See the Pen xJBmwN by LeoZoe (@LeoZoe) on CodePen

[Change and animate images by clicking on different buttons.]

Sir, I really appreciate for your help. It's completely brilliant and motivating me to learn about GSAP further. I will be continuing with my interest using GSAP animation.  Thank you once again.

[Change and animate images by clicking on different buttons.]

Hello, I am actually trying to achieve this animation effect using GSAP. 

https://tympanus.net/Development/ImageTransitions/index6.html 

 

In "other" option select example 4 so you can see what i'm trying to achieve. They have used css3 keyframe for this effect but i would like to make it using GSAP.

Only thing is, each button has assigned one image in sequence.When I click on button 1, first image should be visible in image-wrapper with similar animation. Clicking on button2 replace image-2 and so on. Could someone help me with this. Thanks in advance.

See the Pen pLXLBJ by LeoZoe (@LeoZoe) on CodePen

[Create typewriter effect for textarea placeholder text]

Hey Tweeners, I was wondering is it possible to create typing effect for placeholder text without using "SplitText"? If yes how to set textarea placeholder as target in tweenmax function. I have tried  but it's showing null target. Anyone can explain why?

See the Pen PQGJEE by LeoZoe (@LeoZoe) on CodePen

[How can I create this effect using GSAP?]

One more thing how can I set trigger position at the bottom somewhere instead of default center position. I tried triggerPosition and scrollOffset but seems it is not working.

 

[How can I create this effect using GSAP?]

Thank you Sahil. I have checked the doc and try to use triggerhook and offset properties to achieve what I have to achieve as I shown in image. I want trigger start position at the bottom. And I don't know why it's adding extra space after last div using scrollMagic?