[animation activation by swipe]

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

[animation activation by swipe]

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

[animation activation by swipe]

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,
  });
});

[animation activation by swipe]

Thank you will look more on this plugin.

 

Was trying to add functions on multiple difrent ways but no results 

[animation activation by swipe]

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

[clip path to gsap animation]

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

[clip path to gsap animation]

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

[clip path to gsap animation]

See the Pen MWQpYoE by GrumpyDevoloper (@GrumpyDevoloper) on CodePen

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

[clip path to gsap animation]

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

[clip path to gsap animation]

 

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

[scroll bar not reset on refresh]

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/

[scroll bar not reset on refresh]

1 hour ago, GreenSock said:

Please make sure you're using the latest version, and if that still doesn't work, try adding this: 

 

window.addEventListener("load", () => {
  ScrollSmoother.get().scrollTop(window.pageYOffset);
  window.history.scrollRestoration = "auto";
});

Does that help at all? 

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

[scroll bar not reset on refresh]

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

[club file structure on publish]

thank you

 

will do this and use .gitignore too 

[scroll bar not reset on refresh]

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.

 

[club file structure on publish]

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