omi

April 9

how i can draw path along with arrow?
do i need to create separate path for arrow?
is it possibel to draw path along with arrow without using drawsvg plugin?

See the Pen rNbvLNx by omi-bhatia (@omi-bhatia) on CodePen

November 28, 2023

if we place the code under gsap.media() then click functionality on links are not working. can anyone assist me on same

Note: i want to play the animation when width of the viewport more then 1120

See the Pen mdvrmOY by omi-bhatia (@omi-bhatia) on CodePen

November 6, 2023

2 hours ago, Cassie said:

As both Rodrigo and I mentioned - the position parameter.

I've added in a commented out example in the codepen and we've linked multiple times to the position parameter docs. It's easier than you think - take a look and give it a go.

@Cassie @Rodrigo
I made some changes to the code it's working but only one minor issue is pending

on scroll everything is working fine but when I click on the last menu item the last card does not slide when I place the highlighted block code above as highlighted in the screenshot

tl.from(".panel__card--four", { y: () => window.innerHeight });

https://prnt.sc/LnIZAQg1xCqZ

codepen:

November 6, 2023

5 minutes ago, Cassie said:

Hey there

I simplified this down a bit so that the calls changing the links are placed individually on the timeline. Probably easier to comprehend this way?

If you need to change the position of them at all - as Rodrigo suggested - take a look at the position parameter.

@Cassie Thanks for quick response

i checked but still menu are highlighted when the card animation is completed
is there any way to hightlight the menu when card position at half of the screen?

November 6, 2023

On 11/3/2023 at 5:30 PM, Rodrigo said:

Hi,

Yeah your demo is a bit convoluted since everything is hard coded. Right now I'm on my phone so I can't really tinker with the code but in your original demo us the position parameter to add your set instances halfway through the card animation so they overlap.

Finally keep in mind that your animations use the default power1.out easing function so timing the exact middle of the animation is not as trivial as using half it's duration, so you'll have to do some trial and error to get it precisely right.

Check the docs and examples of the position parameter in order to grasp how it works, is not really that complicated.

Happy Tweening!

@Rodrigo can you help me to fix this issue

November 3, 2023

14 hours ago, Rodrigo said:
Hi,

Maybe something like this:
let currentLinkIndex = 0;
const links = gsap.utils.toArray(".panel__options span");
const timePerLink = tl.duration() / links.length;
links.forEach((link, i) => {
  tl.call(() => {
    links[currentLinkIndex].classList.remove("active");
    link.classList.add("active");
    currentLinkIndex = i;
  }, null, i * timePerLink)
});
Here is a fork of your demo:

@Rodrigo thanks for responding

i tried but it's not working i want to highlight the menu when card at half of the screen

Hopefully this helps.

Happy Tweening!

November 2, 2023

I'm trying to highlight the navigation corresponding to the card when the card is half of the screen on scroll. Does anyone have a suggestion to make this effect

See the Pen mdvrmOY by omi-bhatia (@omi-bhatia) on CodePen

August 28, 2023

On 8/14/2023 at 9:00 PM, Toso said:

I don't have an online demo for this section only iam sorry I created it inside a project currently working on it, it's a nextjs app

@Tosoi need your help to implement the click functionlaity

August 27, 2023

Looking for developer to create stacking card animation on scroll like below website i have already done some part

https://swagapp.com/

August 27, 2023

On 8/25/2023 at 11:50 PM, Rodrigo said:

Hi,

I don't really understand what you mean with this:

@mvaneijgen already linked a video where @Cassie talks about this:

Check this example:

Hopefully this helps.

Happy Tweening!

i tried but not working can anyone help me to provide the code please..

August 25, 2023

Thanks for the Gsap community to help me on this task
minimal demo :

See the Pen yLGYvqp by omi-bhatia (@omi-bhatia) on CodePen

I tired to make the same animation effect like "swagapp" website but i am facing some issue like

1. on pinned the card content is cutting and card is touching at bottom of the window . how i can set the white space at below card?
2. how i can set the delay between timelines for now slide moves very fast.

3. how to make a click functionality so that user can direct go to particular slide means card can move on scroll and on click.

Similar animation like swagapp.com website

August 25, 2023

On 8/11/2023 at 8:41 PM, mvaneijgen said:

CSS, CSS, CSS. It is the most important step when designing a layout for animation. The issue its, that if you put bad CSS in you get bad animations at the other end. I can't fix your layout for you, that is something you have to get better at, keep in mind less is more in this case

I've tried some hacks, to calculate the height of the cards with all there offsets, but I don't know how this will hold up in the real world. Hope it helps and happy tweening!

How to manage the card because on some laptops complete content is not visible is it possible to keep the white space always at bottom of the card at moment card is touching at the bottom of window

August 25, 2023

i tried same code on my project but they not work same as your example
on first item they are not adding the class and last item highlight when complete section out of view port

August 22, 2023

On 8/17/2023 at 9:41 PM, mvaneijgen said:

There is no need to post in multiple places! We strive to read every post on this forum.

What have you tried your self already? We love to see what you can come up with, that way we can see your thought process and thus better help you.

Here is an example what does a similar thing.

@mvaneijgen can we highlight the menus using timeline?

August 17, 2023

how we can highlight the particular navlink on scroll?

See the Pen xxQoPjQ by mvaneijgen (@mvaneijgen) on CodePen

August 17, 2023

On 8/11/2023 at 8:41 PM, mvaneijgen said:

CSS, CSS, CSS. It is the most important step when designing a layout for animation. The issue its, that if you put bad CSS in you get bad animations at the other end. I can't fix your layout for you, that is something you have to get better at, keep in mind less is more in this case

I've tried some hacks, to calculate the height of the cards with all there offsets, but I don't know how this will hold up in the real world. Hope it helps and happy tweening!

is it possible to hightlight the navabar according to the section?

August 14, 2023

3 hours ago, Toso said:

boxes.forEach((e, i) => {

gsap.set(e, { marginTop: () => i * 15 });

boxTL.to(e, {

yPercent: 0 ,

onUpdate: () => {

index = i;

activeDot();

},

onComplete: () => {

e.classList.add("active-box");

gsap.utils.toArray(".active-box").forEach((x) => {

let currentScale = gsap.getProperty(x, "scale");

gsap.to(x, {

scale: () => currentScale - 0.025,

});

});

},

onReverseComplete: () => {

e.classList.remove("active-box");

gsap.utils.toArray(".active-box").forEach((x) => {

let currentScale = gsap.getProperty(x, "scale");

gsap.to(x, {

scale: () => currentScale + 0.025,

});

});

},

});

});

//******************** thats the second option if you want to get the same animation and everything but im still trying to make it better

Can you provide the demo link with compelete htm, css and javascript

August 14, 2023

1 hour ago, Toso said:

const boxes = gsap.utils.toArray(".epitems__singleItem");

const scrollNav= gsap.utils.toArray(".scroll-btn");

let index = 0;

const endTime = 1000 * boxes.length;

gsap.set(".epitems__singleItem", { position: "absolute", transformOrigin: "top" });

gsap.set(".epitems__singleItem:not(:first-child)", { yPercent: 140 });

function activeDot() {

gsap.to(scrollNav, { border: "1px solid transparent", ease: "sine", duration: 0.1 });

gsap.to(scrollNav[index], { border: "1px solid #391952", ease: "sine", duration: 0.5 });

}

let boxTL = gsap.timeline({

scrollTrigger: {

trigger: main.current,

start: "top top",

end: `'+=${endTime}px'`,

scrub: 2,

pin: true,

},

});

//************************************* option 1 for animation

boxes.forEach((e, i) => {

gsap.set(e, { marginTop: () => i * 15 });

boxTL.to(e, {

keyframes: [{ yPercent: 0 }, { scale: () => 0.85 + i * 0.03 }],

onUpdate: () => {

index = i;

activeDot();

}

});

});

//************************* thats the first part make sure its working with you so we can move to the next part and stuff dont get complicated , for the animation when you use onUpdate callback it will solve the problem that you have with tab highlighting also the animation here is one of 2 options i tried but thats the simple one , the other one i used a nested loop inside onComplete & onReverseComplete callbacks to get the the same result like the ref section from swag

@Toso
Thanks for sharing the code do you have demo link to check the output?

August 14, 2023

7 hours ago, Toso said:

@omi I have created this section, the tricky part was making the buttons work along with the animation itself, I used scrolltoplugin to solve this problem but it create another bug on refresh let me know if you made it work and how you did it

@Toso can you share your code because tabs highlight on scrolling is pending

August 12, 2023

16 hours ago, mvaneijgen said:

CSS, CSS, CSS. It is the most important step when designing a layout for animation. The issue its, that if you put bad CSS in you get bad animations at the other end. I can't fix your layout for you, that is something you have to get better at, keep in mind less is more in this case

I've tried some hacks, to calculate the height of the cards with all there offsets, but I don't know how this will hold up in the real world. Hope it helps and happy tweening!

it seems it's working ver very thanks

August 11, 2023

32 minutes ago, mvaneijgen said:

Please remove everything to do with GSAP and check if the issue still persist. I think is probably will. There is no amount of JavaScript that will fix a CSS layout, so it is really import to fix the css before adding any GSAP code.

Instead of using a fixed pixel value or a percentage based value you can also do something dynamic. Eg here I get the height of the current window. This way it is always just off screen. No matter if the screen is 600px high or 3000px

.panel__stack {
--spacer:4rem;
min-height: 120vh;
position: relative;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
align-items: center;
justify-items: center;
}

min-height is conflicting with the layout if i'm changing the dimension they will work differently on all devices
can you suggest me how to add the spacing below the last card

August 11, 2023

19 minutes ago, mvaneijgen said:

Codepen might be weird with window.innerHeight if you fork my latest version and open the debug menu you will see it works as expected.

Thanks for quick response and helping
i have download the codepen any open in browser on large device working fine by on normal resolution (1366 * 768) last card fully visible
tl.from(".panel__card--two", { y: () => window.innerHeight});
can you please explain this logic

August 11, 2023

1 hour ago, mvaneijgen said:

I don't know what you mean. To me it looks exactly like the reference website, the offset might be a bit off, but that you can fix with CSS.

Thanks for quick response. sorry for my bad English
Please check this link
https://prnt.sc/Y6S0lja0p0dc
on viewport one card are showing at one time but when user scroll then next card will show how i can achieve this ?
i hope this helps you to understand but i want to implement
i had implemented the same but only issue the placement of cards is not middle of the screen on every resolution

i also checked your codepen you have made same changes in css and animation but still same issue all cards are showing on viewport default without scrolling
https://prnt.sc/UTtMkcisykS5

August 11, 2023

31 minutes ago, mvaneijgen said:
Hi @omi there are multiple ways

You can use function based values, here I just get the current window height and do that times 3
// What you have right now
start: "50% 50%", // when the top of the trigger hits the top of the viewport
end: "100% 40%", // end after scrolling 500px beyond the start
  
// Function based values based on screen size
start: "50% 50%",
end: () => `${window.innerHeight * 3} 40%`, 
Also check out gsap.matchMedia() with which you can do css type media queries based on screen size https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

Also it is better to animate more performant type properties eg instead of top, try animating y or yPercent

After digging some deeper in your code, I have a few more points, check out this video

GSAP becomes a lot easier if you leave GSAP for what it is and first focus on CSS. Personally I lay out everything with CSS where I want elements to end up, then I just can do a simple .from() tween to get them where I want them to start from.

I've moved a lot of your CSS around and removed the top: 400% offsets, these really over complicate things. I've used a simple CSS Grid on the parent and set all .cards to lay on top of each other, and I then of set them based on their nth-child position. (same as the video above)

It all then looks like this

When my CSS is 100% correct I focus on the animation

See there is no ScrollTrigger, that is because the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.

Hope it helps and happy tweening!

Comment: we want to hide all cards except the first card . did you check the reference website ?

August 11, 2023

i trying to create card stacking animation on scroll similar to https://swagapp.com/?ref=godly website.
Query:
How i can set start and End values dynamically according to the browser because I'm checking on normal desktop (1366 * 768) is working but when i checking on the large device large white space is showing. how i can the card position always middle of the screen

you can check the reference website but i want exactly

https://swagapp.com/?ref=godly

See the Pen jOQjyQG by omi-bhatia (@omi-bhatia) on CodePen

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by omi