omi

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?

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

@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: https://codepen.io/omi-bhatia/pen/mdvrmOY

@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?

@Rodrigo can you help me to fix this issue

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

@Tosoi need your help to implement the click functionlaity

Looking for developer to create stacking card animation on scroll like below website i have already done some part https://swagapp.com/

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

Thanks for the Gsap community to help me on this task minimal demo : https://codepen.io/omi-bhatia/pen/yLGYvqp 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

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

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

@mvaneijgen can we highlight the menus using timeline?

how we can highlight the particular navlink on scroll?

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

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

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

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

.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

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

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 https://codepen.io/omi-bhatia/pen/jOQjyQG 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

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

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