GrumpyDevoloper

that makes so much sense and i use css transitions so rare now trying to use gsap for all, but sometimes you need to make compromises like this today, but how you explained it makes even more easier now to play gsap and transitions if needed since i got good understanding how things work and what mistakes i made

minimal demo is hard to make since i have slider.js and swipe.js with three.js and gsap with jquary on there, but i got it it working making gsap on load animations and then used transition rules for css and it works now like i was thinking, but somehow css makes animations with gsap makes everything laggy so had to make lot of work to make all smooth small tweaks etc, but it works now. thank you for all assistance and support i really like gsap it is so smooth when getting everything controlled to gsap and even better when using three.js as assistant

okey now i know this is the right way to make animation run on swipe, but i will need some help to set up observer function to run animation. trying to figure this still out since havent used it before so any help would be nice down below is animation function for onclick, but anyone knows how to make it as drag, swipe $(".thumbs-container img").click(function () { gsap.from(".brand", { duration: 1, delay: 1, opacity: 0, x: "-30", ease: Expo.easeInOut, }); gsap.from("header .navigation .navigation-items a", { duration: 2, delay: 1.3, x: "-200", opacity: 0, ease: Expo.easeInOut, stagger: 0.3, }); gsap.from(".swiper-slide .text-content .title", { duration: 1, delay: 1, opacity: 0, y: "-50", ease: Expo.easeInOut, }); gsap.from(".swiper-slide .text-content p", { duration: 1, delay: 1, opacity: 0, x: "-80", ease: Expo.easeInOut, }); gsap.from(".swiper-slide .text-content .read-btn", { duration: 1, delay: 1, opacity: 0, x: "50", ease: Expo.easeInOut, }); gsap.from(".bg-slider-thumbs", { duration: 1, delay: 1, opacity: 0, y: "50", ease: Expo.easeInOut, }); gsap.from(".thumbs-container img", { duration: 2, delay: 1.3, y: "100", opacity: 0, ease: Expo.easeInOut, stagger: 0.3, }); });

Thank you will look more on this plugin. Was trying to add functions on multiple difrent ways but no results

is there way to add gsap animation that runs on swipe? i have one page that has loading animations and click activations, but same page has touch swipe browsing too and i want to make animation there too

yeah these all looks correct answers now i was overthinking this too much and i guess got confused will test both ways now, but those seems both working like i want

thank you so i was overthinking this and trying to make it even more complex

https://codepen.io/GrumpyDevoloper/pen/MWQpYoE this is what i mean by overlay animation it is working by css and js, but wanted to get more control on it and all animations together in timeline etc

the issue is that cant figure out how i convert css clip path to gsap. clip-path: circle(150% at 0 50%); this one is css, but when i try to use the property on gsap it says errors so it dosent understand this clip path style so how i make it to gsap for it can understand the rule

hello guys im little confused how to i convert css clip path rule to gsap animation. Basically im trying to make page transition using overlay with clip path properties. starting path is this .overlay { position: absolute; width: 100%; clip-path: circle(0% at 0 50%); } this one i try to get on overlay and page trasnsition. .overlay { clip-path: circle(150% at 0 50%); transition: 2s ease; transition-property: clip-path; } i use these for animation already at slider transitions on css properties, but now i feel dumb that can figure out how to make it to overlay

tryed to make pen demo, but i guess i have too many files etc on page so it was so bad everything was so messed up, decided to copy the page on githup with all page files minus club file smoothscroller so that needs to put active to see total effect on page. hope this helps even little even it is little more hassle to you. oh nav files i took off too so it is just 1 page https://github.com/GrumpyDevoloper/debugging pushed website live today since deadline was coming it is working, but not perfect yet, but i have time to fix issues and debug it more on the go https://www.grumpydevoloper.com/

it helped some for now when i refresh the page it refreshes, but wont scroll on top like start position it stays on the same position as it was before i mean page and scrollbar is same position on refresh. previos was scrollbra stays same, but page goes at start astleast this is some improvments. will try to make demo or send public link on website today or tomorrow for code

will make codepen account and provide link when done it has been fun transition tho designer to code and design and css only to js and now gsap etc

thank you will do this and use .gitignore too

run wierd issue that cant figure out i have scrolltrigger and smoothscroll on everything is working and when i refresh page the page refreshes and loads like it should be, but scroll bar stays on where it was and when moving scroller page jumps on location it was before refresh.

okey i have to ask and make sure everything is right before going public. so i just bought business green and using club features on website. Installed all using NPM and all are on node_modules and linked what i use to node_modules path so all good on local, but what is correct way to going public on site to link /use those club features? i could just make .gitignore and .env to hide all node_modules or do i just copy the files i use on example same folder as other JS is located? little bafflede here since dont want to have mistakes and do i need to hide those club files on public eyes? using dedicated host server with cloud backup and all ssl etc. sorry for asking but it has been on my mind too much and might be answered here already many times