Jump to content
GreenSock

krunal

On scroll motion path card move

Recommended Posts

Hello @all,

 

image.thumb.png.6dcce4e34a0244030f1b37f4052711b1.png

 

I want to scroll card animation. When "How it works " section appear card will stop that position and mobile imag change 2 times.

After more scroll it's back to next path. All this animation are in perfome in center of screen.
For currently  codepen demo it's hide on page scroll.

Bassiclly  two path with middle one stop animation. As GSAP motion svg it's continuously moving.

thanks :)

See the Pen YzYxNVB?editors=1010 by krunalfrontend (@krunalfrontend) on CodePen

Link to comment
Share on other sites

Hey, 

The code needs to be structured. I will write the steps I would do, do try it let me know if that doesn't work.
1. Create a section which is 100vh height. Create a scrollTrigger for this, pins this section, and by using larger end value make it more scrollable. 

2. Now set the line SVG it should cover the entire section. make it position absolute to this section. So that content(mobile image and card image ) can come on top of it. 
3. Then set the card and mobile image on the section which should be on top of the line svg. 
4. Then do motion animation along the line. The animation roughly look something like how I showed in the code block.
This is not tried and tested code. Just the rough steps. 
 

ScrollTrigger.create({
	trigger: "#section",
	scrub: true,
  	pin: true
  	end: "+=3000" //adjust this according to the need. 
	markers: true,
  	animation: tl 
});

let tl = gsap.timeline()
tl.to(card, {motion along the line, duration: 1})
.to(mobile image, {flip}, "-=0.5")

 

  • Like 2
Link to comment
Share on other sites

Hello @Trapti

Thanks for your guidelines. It's help me a lot.
https://codepen.io/krunalfrontend/details/YzYxNVB
Here i am facing issue with pin to card. I don't know how i can pin card and change mobile img.
And after that card move to motion path. I check gsap documention but i did't find yet.

Thanks in advances :)

Link to comment
Share on other sites

Hey, 

 

The HTML and CSS in that code is very messy. Clean the code have proper structure HTML CSS and then use GSAP. Also by looking at GSAP code looks like it has been used wrongly. Please do read docs. 
Here is how pin works in docs. https://greensock.com/docs/v3/Plugins/ScrollTrigger/pin 
 

Happy scrolling... 

Link to comment
Share on other sites

Hello @Trapti

 I know code are messy in codepen becuase i am testing there.
Can you please help to connect(pin) card and mobile. For now i can't able to stop card when mobile screen appears.

 

Just give me rough flow/demo/reference that could be great.
thanks :)  

Link to comment
Share on other sites

Hey,

 

This could be an alternative solution.


Move the SVG so that the 'moving point' remains at the same place of viewport.
The basic animation 'moving point' has a duration of 1 sec.
Adjust the desired further animations in terms of duration and positioning (helper: ScrollTrigger progress).

 

See the Pen MWrELvR?editors=0010 by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel

 

  • Like 3
Link to comment
Share on other sites

Hey @mikel,

Thanks for replay.

But still i am facing issue with motionsvg. How i can stop in middle of motion path. 
 

.to('#point', {fill: 'red', scale: 1.5, duration:0.04, repeat: 1, yoyo: true}, 0.3)

Like your codepen instance of red i want to stop motion svg for a moment and start new scrolltrigger of change mobile image.
After that It's start again motion animation.
I did't find any way to stop motionsvg path animation in doc.
There are any other way to do this animation ?? 

Here are codepen minimal demo.

See the Pen qBpPJxa by krunalfrontend (@krunalfrontend) on CodePen


And card moving too fast in middle of path becuase path are verticle.

thanks @mikel for your time,

Link to comment
Share on other sites

Hey @krunal,

 

Then split e.g. the motionPath animation (start, end).
And the change part starts a little later after the end of the first motion part.

 

See the Pen JjMrLeZ??editors=1010 by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel

 

  • Like 3
Link to comment
Share on other sites

Hey @krunal,

 

It is not easy to understand exactly what you want.
In this example, all elements are in one SVG for easier handling of the relationships between them.
Take a detailed look at the process and code and try to understand what is happening and when.
Of course, there are always several alternatives as to how a process should look and how it can be structured.

 

See the Pen oNppZqm?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×