How can I scroll it from right to left like a wave?

I want to scroll it from right to left, but it should move like a wave. How can I do this, or is there any JavaScript plugin for it?
No description
12 Replies
Jochem
Jochem3w ago
if the question is animation + javascript, the answer is almost always gsap no idea how to use it myself though
mdhaiderhossain
i know how to animate it but i did not do like this before that's why i don't understand how should i do it.
Jochem
Jochem3w ago
Someone else might have a more in depth answer, but all I can do to help in this case is link you gsap: https://gsap.com/
Homepage | GSAP
GSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser.
mdhaiderhossain
i know it mate. i need like my example who did it like me & if anyone do similar to me and give me hint of that then it will be helpful for me.
clevermissfox
clevermissfox2w ago
you want an animation that plays on its own or is only triggered on scroll? GSAP is a popular js animation library or you can use your own css keyframes
mdhaiderhossain
this one is a branding section & it will move like marquee tag but the section animation should be like wave. how can i do it ? do you have any idea ?
No description
clevermissfox
clevermissfox2d ago
Svg most likely for the wave; regular translate for the marquee. And depends if you want it triggered on scroll or not and how good of browser support you need
mdhaiderhossain
i don't want to scroll it by scroll triggered. it will move by default. actually i wanted scroll it like marquee as well as wave type. like, the branding logo move like a wave. how can i do it?
b1mind
b1mind2d ago
You can make a SVG with two paths one for the wave, another for the path for the logos to follow. I saw GSAP mentioned it would probably be what I used to do this.
mdhaiderhossain
okay, let me try & if you get same thing like my image example then please provide me. thank you.
b1mind
b1mind2d ago
I probably won't have time to make an example this intense sorry. Would be a fun one though.
mdhaiderhossain
it's ok, no problem but if you get anything like this then you can share.
Want results from more Discord servers?
Add your server
More Posts
justify-content vs margin autoWhen centering horizontally is it better to use flexbox or margin auto? what are the factors that I Navigating back to previous pageSo i am trying to create a back button in a web app which s working fine using `history.back()` but How to make a responsive color design with image.I am doing a frontend mentor project. There is a background-color for the nav and hero section. HoweHow to responsively move elements from a row to a column with subgrid?I am working on this front end mentor challenge. I’m using subgrid for the first time and it’s workiSearching for a specific background clip/mask propertyHi, I've been searching for a specific property that would allow me to reveal a background behind soTwo columns layout for code snippets: A or B?What do you think is better? A (left) or B (right) and why? I prefer B because the user doesn't haAny helpful resources for styling a search bar with an adjacent search button?I'm still pretty early in my web dev journey but one thing I keep struggling with is styling a searcCreating a cart functionalityI'm currently creating this design (https://www.frontendmentor.io/challenges/ecommerce-product-page-disable user agent view-transition root conditionallyIs there a way to disable the standard user agent view transition manually before updating the dom? Why is the <div> with position-absolute and start-100 positioned outside the container?```css .element { background-color: black; margin-left: 30rem; margin-right: 30rem;