silverd

Hello Zach thanks I will try it's just complicate because the project is on nuxtjs (vuejs) and so the document.body is probably weirdly understood by this framework because every time I uncomment that // Smooth scroll setup const bodyScrollBar = Scrollbar.init(document.body, { damping: 0.1, delegateTo: document, }); bodyScrollBar.setPosition(0, 0); bodyScrollBar.track.xAxis.element.remove(); // How to get them to work together ScrollTrigger.scrollerProxy("body", { scrollTop(value) { if (arguments.length) { bodyScrollBar.scrollTop = value; } return bodyScrollBar.scrollTop; }, }); everything outside the screen is hidden like with the overflow hidden but I can scroll just nothing to see I will try to do something on codepen or something like that for vue

I have no error and the smooth scroll work perfectly but when I put it into the default layouts of vueJs all the animation depending of scroll-trigger doesn't work anymore did I forget something ? // Smooth scroll setup const bodyScrollBar = Scrollbar.init(document.body, { damping: 0.1, delegateTo: document, }); bodyScrollBar.setPosition(0, 0); bodyScrollBar.track.xAxis.element.remove(); // How to get them to work together ScrollTrigger.scrollerProxy("body", { scrollTop(value) { if (arguments.length) { bodyScrollBar.scrollTop = value; } return bodyScrollBar.scrollTop; }, });

ah yes now I have no more error but it's not working anymore everything is hidden but thanks no more error

Hello I have just this error and I have no idea why gsap_dist_ScrollTrigger__WEBPACK_IMPORTED_MODULE_12__.ScrollTrigger.scrollerProxy is not a function The scrollTrigger works perfectly, I just wanted to add some smooth to my scroll so I added that part // Smooth scroll setup const bodyScrollBar = Scrollbar.init(document.body, { damping: 0.1, delegateTo: document, }); bodyScrollBar.setPosition(0, 0); bodyScrollBar.track.xAxis.element.remove(); // How to get them to work together ScrollTrigger.scrollerProxy("body", { scrollTop(value) { if (arguments.length) { bodyScrollBar.scrollTop = value; } return bodyScrollBar.scrollTop; }, }); the import works perfectly otherwise my timeline below would not works import { gsap } from "gsap/dist/gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); import Scrollbar from "smooth-scrollbar"; so I am a bit confused because that part works fine let sections = gsap.utils.toArray(".linkProject"); let tl = gsap.timeline({ defaults: { ease: "expo.inOut" }, scrollTrigger: { trigger: ".projectsListing", scrub: 1, // markers: true, toggleActions: "restart pause reverse pause", end: "bottom 90%", // end: () => // "+=" + document.querySelector(".projectsListing").offsetHeight, }, }); tl.from(sections, { y: -120, opacity: 0, duration: 1.45, transformOrigin: "center", scale: 0.45, stagger: 0.75, }); the only part doesn't working in this is the end function he doesn't seem understand offsetHeight or offsetWidth but that is an other topic and probably related to vuejs

I will try your example maybe it will work thanks sorry if I am not really clear it's not a child into a parent but more a child into a parents sibling of the parent I want to reach anyway thank you

for your component your $emit is into the logo who is called inside the index.vue that I already saw plenty of example like that and it's quite common but I called my component loader on the layout default and like that is above the nuxt route the header and footer who are in the default.vue layout maybe I am totally wrong into my application splitting but I tried to organised everything into my default layout to be sure is everywhere if needed

Hello here a link to my sandbox https://codesandbox.io/s/test-loading-u4485?file=/layouts/parts/Loader.vue like you can see the emit is into the loader.vue maybe not the right place I never really understood this emit yet and how get the data inside the index.vue where the tlHome is because I have to do .play on this specific tl

Hahahaha in fact I try just to know when my animation from a component is done like that I can start the other one my tlHome is my timeline from my <nuxt/> component index/home I was just hoping maybe someone have the same kind of issue because it's difficult to explain and difficult to share but my loader component have animation when it's done complete I would like to start the animation of my home one maybe I will try to use the states from VueX

Hello Guys I have a question maybe it will be not clear but I hope and if there is already an answer for this specific question pls let me know so I have my portfolio app a nuxtjs app (vuejs) I have a loader so obviously it will be trigger only when you enter into my portfolio and it's working good but I would like to with the onComplete to pass a timeline.play to my first screen after the loading to start exactly after the loading ending but my issue is I have no idea how to proceed I thought to use an $emit but it seem didn't work here my layout <div id="app"> <Loader/> <Header/> <nuxt /> <Footer/> <BgDecor/> </div> here my loader methods:{ init(){ const loader = document.querySelector('.loader') const logo = document.querySelector('.loaderLogo') const messages = document.querySelector('.messages') const fillLogo = document.querySelector('#fillLogo') const strokeLogo = document.querySelector('#strokeLogo') let tl = gsap.timeline({ onComplete: function(){ console.log('fini') this.loading = false this.$emit(tlHome.play()) } }) tl.set(logo, {scale: 3}) tl.set(messages, {autoAlpha: 0}) tl.to(logo, { duration: 3, opacity: 1 }) .from(strokeLogo, { duration: 6, drawSVG:"0" }, "-=2") .to(logo,{ duration: 1, scale: 1 }, "-=4.5") .to(strokeLogo,{ duration:1, opacity:0 }, "-=2.5") .from(fillLogo, { duration: 1, opacity:0 }, "-=2.5") .to(loader, {duration:.65, opacity:0, display:'none'}) //console.log("duration is: " + tl.duration()); } }, mounted(){ this.init() } the fini is trigger the loading false a well but the tlHome is not recognised even if I tryed with this.tlHome.play() I just hope someone had already a similar issue probably passing variables from sibling or parents child parents is not the correct way for that but because Footer Header etc are split into components i would like to make sure the animation and timeline are triggering correctly when it's like that I tried to put a delay but obviously if I put a delay I have to use it only when the loader is called not everytime otherwise te home showing anim will be a bit long thanks anyway

Yes great the design is perfect sorry about codepen the next time

Thanks but the render it's not very good with your example maybe it's better with svg ? i have two functions and with that my design is perfect function init() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); draw(ctx); } function draw(ctx) { // fondCopie/Trac transparent ctx.save(); ctx.beginPath(); // fondCopie/Trac transparent/Trac ctx.moveTo(90.0, 113.5); ctx.bezierCurveTo(79.9, 113.5, 67.1, 111.3, 61.8, 106.7); ctx.bezierCurveTo(59.6, 94.5, 55.7, 85.9, 51.5, 75.7); ctx.bezierCurveTo(47.3, 65.6, 52.9, 56.0, 56.5, 49.6); ctx.bezierCurveTo(58.7, 45.5, 67.1, 40.7, 71.9, 38.7); ctx.bezierCurveTo(72.8, 38.3, 73.6, 38.0, 74.5, 37.7); ctx.bezierCurveTo(75.6, 37.7, 76.7, 37.8, 77.7, 37.9); ctx.bezierCurveTo(75.1, 40.7, 73.0, 42.5, 73.0, 43.7); ctx.bezierCurveTo(73.0, 44.8, 73.5, 47.0, 75.1, 48.9); ctx.bezierCurveTo(75.1, 48.9, 75.1, 45.2, 79.0, 46.0); ctx.bezierCurveTo(79.0, 46.0, 88.6, 49.9, 88.6, 51.6); ctx.bezierCurveTo(88.6, 51.6, 88.0, 55.6, 88.0, 64.7); ctx.bezierCurveTo(88.0, 73.5, 89.9, 101.7, 90.0, 103.6); ctx.lineTo(90.0, 103.7); ctx.bezierCurveTo(90.0, 103.7, 90.0, 103.7, 90.0, 103.7); ctx.bezierCurveTo(90.0, 103.7, 90.0, 103.7, 90.0, 103.7); ctx.bezierCurveTo(90.0, 103.7, 90.0, 103.7, 90.0, 103.7); ctx.bezierCurveTo(90.0, 103.7, 90.0, 103.7, 90.0, 103.7); ctx.lineTo(90.0, 103.6); ctx.bezierCurveTo(90.1, 101.7, 92.0, 73.5, 92.0, 64.7); ctx.bezierCurveTo(92.0, 55.6, 91.4, 51.6, 91.4, 51.6); ctx.bezierCurveTo(91.4, 49.9, 101.0, 46.0, 101.0, 46.0); ctx.bezierCurveTo(104.9, 45.2, 104.9, 48.9, 104.9, 48.9); ctx.bezierCurveTo(106.5, 47.0, 107.0, 44.8, 107.0, 43.7); ctx.bezierCurveTo(107.0, 42.5, 104.9, 40.7, 102.3, 37.9); ctx.bezierCurveTo(103.3, 37.8, 104.4, 37.7, 105.5, 37.7); ctx.bezierCurveTo(106.4, 38.0, 107.3, 38.3, 108.1, 38.7); ctx.bezierCurveTo(112.9, 40.7, 121.3, 45.5, 123.5, 49.6); ctx.bezierCurveTo(127.1, 56.0, 132.8, 65.6, 128.5, 75.7); ctx.bezierCurveTo(124.3, 85.9, 120.4, 94.5, 118.2, 106.7); ctx.bezierCurveTo(112.9, 111.3, 100.1, 113.5, 90.0, 113.5); ctx.closePath(); // fondCopie/Trac transparent/Trac ctx.moveTo(48.5, 33.4); ctx.bezierCurveTo(54.4, 29.1, 60.4, 25.9, 74.4, 35.2); ctx.bezierCurveTo(74.4, 35.2, 56.2, 38.2, 48.5, 33.4); ctx.closePath(); // fondCopie/Trac transparent/Trac ctx.moveTo(105.6, 35.2); ctx.bezierCurveTo(119.6, 25.9, 125.6, 29.1, 131.5, 33.4); ctx.bezierCurveTo(123.8, 38.2, 105.6, 35.2, 105.6, 35.2); ctx.closePath(); // fondCopie/Trac transparent/Trac ctx.moveTo(179.9, 24.0); ctx.bezierCurveTo(178.8, 31.6, 176.2, 33.7, 171.0, 36.0); ctx.bezierCurveTo(165.2, 38.5, 162.2, 37.4, 155.7, 37.7); ctx.bezierCurveTo(154.6, 36.2, 153.5, 34.6, 149.4, 28.3); ctx.bezierCurveTo(149.4, 28.3, 155.9, 26.6, 164.2, 32.9); ctx.bezierCurveTo(163.1, 31.1, 161.9, 29.6, 159.8, 27.8); ctx.bezierCurveTo(157.6, 26.1, 152.0, 23.4, 147.7, 24.7); ctx.bezierCurveTo(146.2, 25.2, 145.1, 26.0, 144.1, 27.2); ctx.bezierCurveTo(143.5, 27.9, 143.5, 27.8, 144.1, 28.5); ctx.bezierCurveTo(144.3, 28.7, 144.5, 29.0, 144.7, 29.2); ctx.bezierCurveTo(148.4, 33.5, 158.6, 44.0, 161.8, 49.9); ctx.bezierCurveTo(164.9, 55.6, 168.9, 70.5, 168.8, 77.0); ctx.bezierCurveTo(165.4, 77.5, 161.1, 77.0, 153.6, 87.9); ctx.bezierCurveTo(150.0, 93.1, 145.2, 97.2, 138.1, 100.3); ctx.bezierCurveTo(136.8, 97.8, 137.2, 92.7, 139.7, 89.8); ctx.bezierCurveTo(134.3, 94.3, 131.5, 98.5, 132.5, 106.2); ctx.bezierCurveTo(128.7, 107.5, 124.0, 107.6, 122.3, 104.1); ctx.bezierCurveTo(120.6, 100.6, 122.0, 95.4, 125.8, 87.5); ctx.bezierCurveTo(130.5, 77.4, 132.8, 74.9, 133.5, 64.5); ctx.bezierCurveTo(134.0, 56.3, 130.3, 49.4, 127.1, 45.1); ctx.bezierCurveTo(124.3, 41.3, 117.2, 39.2, 112.8, 37.3); ctx.bezierCurveTo(127.8, 39.6, 140.0, 33.8, 140.0, 33.8); ctx.bezierCurveTo(135.3, 28.1, 131.3, 27.7, 131.3, 27.7); ctx.bezierCurveTo(132.9, 27.1, 136.1, 26.9, 136.1, 26.9); ctx.bezierCurveTo(123.8, 21.8, 114.6, 25.9, 110.2, 29.9); ctx.bezierCurveTo(108.5, 31.5, 104.9, 33.6, 102.0, 33.7); ctx.bezierCurveTo(99.1, 33.8, 98.5, 33.3, 97.6, 33.1); ctx.bezierCurveTo(97.6, 33.1, 94.6, 30.7, 90.0, 30.7); ctx.lineTo(90.0, 30.7); ctx.lineTo(90.0, 30.7); ctx.bezierCurveTo(90.0, 30.7, 90.0, 30.7, 90.0, 30.7); ctx.lineTo(90.0, 30.7); ctx.bezierCurveTo(90.0, 30.7, 90.0, 30.7, 90.0, 30.7); ctx.lineTo(90.0, 30.7); ctx.lineTo(90.0, 30.7); ctx.bezierCurveTo(90.0, 30.7, 90.0, 30.7, 90.0, 30.7); ctx.lineTo(90.0, 30.7); ctx.lineTo(90.0, 30.7); ctx.lineTo(90.0, 30.7); ctx.bezierCurveTo(85.4, 30.7, 82.4, 33.1, 82.4, 33.1); ctx.bezierCurveTo(81.5, 33.3, 80.9, 33.8, 78.0, 33.7); ctx.bezierCurveTo(75.1, 33.6, 71.5, 31.5, 69.8, 29.9); ctx.bezierCurveTo(65.4, 25.9, 56.2, 21.8, 43.9, 26.9); ctx.bezierCurveTo(43.9, 26.9, 47.1, 27.1, 48.7, 27.7); ctx.bezierCurveTo(48.7, 27.7, 44.7, 28.1, 40.0, 33.8); ctx.bezierCurveTo(40.0, 33.8, 52.2, 39.6, 67.2, 37.3); ctx.bezierCurveTo(62.8, 39.2, 55.7, 41.3, 52.9, 45.1); ctx.bezierCurveTo(49.7, 49.4, 46.0, 56.3, 46.5, 64.5); ctx.bezierCurveTo(47.2, 74.9, 49.5, 77.4, 54.2, 87.5); ctx.bezierCurveTo(58.0, 95.4, 59.4, 100.6, 57.7, 104.1); ctx.bezierCurveTo(56.0, 107.6, 51.3, 107.5, 47.5, 106.2); ctx.bezierCurveTo(48.5, 98.5, 45.7, 94.3, 40.3, 89.8); ctx.bezierCurveTo(42.8, 92.7, 43.2, 97.8, 41.9, 100.3); ctx.bezierCurveTo(34.8, 97.2, 30.0, 93.1, 26.4, 87.9); ctx.bezierCurveTo(18.9, 77.0, 14.6, 77.5, 11.2, 77.0); ctx.bezierCurveTo(11.1, 70.5, 15.1, 55.6, 18.2, 49.9); ctx.bezierCurveTo(21.4, 44.0, 31.6, 33.5, 35.3, 29.2); ctx.bezierCurveTo(35.5, 29.0, 35.7, 28.7, 35.9, 28.5); ctx.bezierCurveTo(36.5, 27.8, 36.5, 27.9, 35.9, 27.2); ctx.bezierCurveTo(34.9, 26.0, 33.8, 25.2, 32.3, 24.7); ctx.bezierCurveTo(28.0, 23.4, 22.4, 26.1, 20.2, 27.8); ctx.bezierCurveTo(18.1, 29.6, 16.9, 31.1, 15.8, 32.9); ctx.bezierCurveTo(24.1, 26.6, 30.6, 28.3, 30.6, 28.3); ctx.bezierCurveTo(26.5, 34.6, 25.4, 36.2, 24.3, 37.7); ctx.bezierCurveTo(17.8, 37.4, 14.8, 38.5, 9.0, 36.0); ctx.bezierCurveTo(3.8, 33.7, 1.2, 31.6, 0.1, 24.0); ctx.bezierCurveTo(-0.9, 16.2, 5.1, 8.3, 8.4, 5.0); ctx.bezierCurveTo(11.7, 1.7, 15.7, -0.4, 20.8, 0.1); ctx.bezierCurveTo(25.1, 0.5, 28.8, 1.1, 33.4, 4.8); ctx.bezierCurveTo(38.0, 8.4, 40.4, 11.0, 43.4, 12.0); ctx.bezierCurveTo(45.5, 12.6, 47.8, 12.5, 50.7, 10.9); ctx.bezierCurveTo(52.5, 9.9, 54.6, 9.0, 56.7, 8.6); ctx.bezierCurveTo(62.6, 7.0, 68.8, 9.1, 74.0, 11.9); ctx.bezierCurveTo(77.0, 13.5, 79.8, 15.4, 82.7, 17.1); ctx.bezierCurveTo(84.7, 18.4, 86.9, 19.6, 89.4, 19.8); ctx.bezierCurveTo(89.6, 19.8, 89.8, 19.8, 90.0, 19.8); ctx.lineTo(90.0, 19.8); ctx.lineTo(90.0, 19.8); ctx.lineTo(90.0, 19.8); ctx.lineTo(90.0, 19.8); ctx.bezierCurveTo(90.0, 19.8, 90.0, 19.8, 90.0, 19.8); ctx.lineTo(90.0, 19.8); ctx.lineTo(90.0, 19.8); ctx.bezierCurveTo(90.2, 19.8, 90.4, 19.8, 90.6, 19.8); ctx.bezierCurveTo(93.1, 19.6, 95.3, 18.4, 97.3, 17.1); ctx.bezierCurveTo(100.2, 15.4, 103.0, 13.5, 106.0, 11.9); ctx.bezierCurveTo(111.2, 9.1, 117.4, 7.0, 123.3, 8.6); ctx.bezierCurveTo(125.4, 9.0, 127.5, 9.9, 129.3, 10.9); ctx.bezierCurveTo(132.2, 12.5, 134.5, 12.6, 136.6, 12.0); ctx.bezierCurveTo(139.6, 11.0, 142.0, 8.4, 146.6, 4.8); ctx.bezierCurveTo(151.2, 1.1, 154.9, 0.5, 159.2, 0.1); ctx.bezierCurveTo(164.3, -0.4, 168.3, 1.7, 171.6, 5.0); ctx.bezierCurveTo(174.9, 8.3, 180.9, 16.2, 179.9, 24.0); ctx.closePath(); ctx.fillStyle = colorLogo; ctx.fill(); ctx.restore(); } it's my logo i would like that it is pixel perfect

Hi i have a question maybe it's simple but maybe not I would like animate a color of canvas shape but i don't understand how in my draw ctx i have this line ctx.fillStyle = colorLogo; colorLogo it's my variable var colorLogo = "rgb(65, 190, 238)"; but with css in tweeMax i don't understand how i have to proceed can you help me ? i have to create a function animate ? Thanks

Hello Rodrigo, This is a continuation of my question about text animation on the path I have not been able to do what I wanted with my text animation so I had to tweak it, taking a .gif animation is text around my form. That's why I have to trigger this gif. at a specific time. I know it's not a best practice but since I can not do it I had to try another way I should add the ".gif" at this time otherwise the animation will start from the beginning of the timeline and thus arrived at the point in question, the animation is already finished: ( Best Jeff

Hi Rodrigo, thanks I wanted to know : why It's not possible to do easily tl.add(slide02.append('<img src="img/text.gif">'), 1.2, {autoAlpha:1, ease:Power2.easeOut}); or .to or .insert because the image.gif is load in the start of animation I throught that as the "addchild" in flash until i don't use "addchild" the animation.gif is not load A bit like "load" my picture just in my timeline at the precise moment I want without using a simple function for it. Because there my function is very very simple maybe too simple for just load one image.gif But it's maybe not possible without it. Thanks

Hello i think it's simple but i would like add and remove a image .gif in my timelineMax I tried to do : tl.to(slide02.append('<img src="img/text.gif">'), 1.2, {autoAlpha:1, ease:Power2.easeOut}); and add or insert but my problem it's that the image .gif begin in start of timeline but i don"t want that, because the .gif is animate and the animation have to start after few others animations. I tried with onComplete and the function but after i don't know how the remove it because after the gif animation i have few others animations and I think it's not the best way function addImageGif () { document.getElementById("imgText").innerHTML='<img src="img/text.gif">'; }; Can you help me ? Thanks