diff --git a/kaviraj/v2/main/about/sequenceSV.js b/kaviraj/v2/main/about/sequenceSV.js new file mode 100644 index 00000000..42aa2a32 --- /dev/null +++ b/kaviraj/v2/main/about/sequenceSV.js @@ -0,0 +1,88 @@ +if (window.innerWidth >= 803) { + + const scrollyVideo = new ScrollyVideo({ + scrollyVideoContainer: 'scrolly-video-container', + src: 'https://teamepyc.github.io/cdn/kaviraj/v2/videos/ffmpeg.mp4', + trackScroll: false, + cover: true, + sticky: false, + full: true + }); + + // code comes here + console.log("code comes here"); + const heroText = new SplitText(document.querySelector(".ka-hero-heading"), { type: "chars" }); + const heroTextChars = [...heroText.chars].reverse(); + const introText1 = new SplitText(document.querySelector(".ka-timeline-intro-txt:nth-child(1)"), { type: "words, chars" }); + const introText2 = new SplitText(document.querySelector(".ka-timeline-intro-txt:nth-child(2)"), { type: "words, chars" }); + const introText3 = new SplitText(document.querySelector(".ka-timeline-intro-txt:nth-child(3)"), { type: "words, chars" }); + + const Timeline = gsap.timeline({ + scrollTrigger: { + trigger: ".ka-timeline", + start: "top 100%", + end: "top 0%", + scrub: true + } + }); + + Timeline + .to(".k-solid-button.about-hero", + {scale: 0.9, filter: "blur(10px)", opacity: 0, duration: 0.5}) + .to(heroTextChars, + {scale: 0.9, filter: "blur(10px)", scale: 1, opacity: 0, duration: 4, stagger: 0.2}, "<") + .fromTo([introText1.chars, introText2.chars, introText3.chars], + {filter: "blur(10px)", scale: 1.5, opacity: 0}, + {filter: "blur(0px)", scale: 1, opacity: 1, stagger: 0.2, duration: 4, ease: "power1.out"}, "+=25") + //.to([introText1.chars, introText2.chars, introText3.chars], + //{filter: "blur(10px)", scale: 1, opacity: 0, duration: 3, stagger: 0.1}, "+=4") + + const Timeline2 = gsap.timeline({ + scrollTrigger: { + trigger: ".ka-timeline", + start: "top 100%", + end: "top 0%", + scrub: true + } + }); + + Timeline2 + .to({}, + {ease: "none", duration: 10, + onUpdate(){ { + const f = this.progress(); + scrollyVideo.setTargetTimePercent(f); + }}, + } + ).fromTo(".image-sequence-fader", + {opacity: 0}, + {opacity: 1}, "-=0.5" + ) + + + + gsap.fromTo(".ka-background-video", + {x: "0vw"}, + {x: "-100vw", + ease: "sine.inOut", + scrollTrigger: { + trigger: ".ka-chapter-transition._0", + start: "40% bottom", + end: "160% bottom", + scrub: true, + } + }); + + gsap.to([introText1.chars, introText2.chars, introText3.chars], + {filter: "blur(10px)", scale: 1, opacity: 0, duration: 3, stagger: 0.1, + scrollTrigger: { + trigger: ".ka-chapter-transition._0", + start: "40% bottom", + end: "110% bottom", + scrub: true, + } + }); + + + if (window.ScrollTrigger) ScrollTrigger.refresh(); +}