Jo Mourad

@Cassie A-w-e-s-o-m-e. That simple lol. And can we put in a default value if none is defined? Watched a bit of the video, and i didn't even know that existed. Will definitely look into this ! Thanks!

I've searched around, but can't find what i need. Maybe because i don't know what terms to search for... (LEARNING CODING AS I GO...) Basically, i have an animation that i want to call in several pages. But i want, let's say, to change the duration of that animation for some instances. Or maybe the "x" translation. So i created a function for my animation function fuzionAnim() { gsap.to(".fuzion", 10, {x:100, yoyo:true, repeat:-1, ease:"none"}) } and call it in the specified pages fuzionAnim(); But can i pass a parameter to the function? For example fuzionAnim(8); // 8 being the duration i want How would i do that? i know it's probably plain javascript fundamentals, but i need a bit of help! Thanks!

Awesome thanks!

Ok! so this means that the css variable on the pseudo element can be called directly from the element itself without using ::before ?

Hey @Dipscom ! I think it's only because i'm used to do it like so? I use wordpress mainly (for customer reasons) and say i have 10 dates in 10 different rows (the html gets very messy with wordpress's visual composer...) and i want to add a bullet point after each of these dates, i found it simpler and quicker to just add it with a pseudo... Any suggestions of a better way? (the way visual composer is made is that you can't really play in the html itself unless you add html code blocks... and i'm using this so that any customer can change freely the content without any help) Thanks!

Hello! I was wondering what does this mean : I mean, here i have lets say this: .div { &::after { content: ""; width: 10px; height: 10px; border-radius:50%; background: blue; position: absolute; right: -2em; top: 20%; } } and i want to animate this pseudo-element. How would a css variable achieve this? Sorry i'm a bit confused. Pretty sure i'm missing something! Thanks !

@OSUblake Oops! You're right! I just fixed that!

Hey guys, i've been wondering why this happens... And only in a smaller resolution (i was able to reproduce with: 1070 x 635 px - have to refresh when scroll is PAST the trigger) Here is the url: https://idylliq.ca/services/ My pinned element jumps to the left when i scroll. Any idea why? Here is my code: servicesTl = gsap.timeline({ scrollTrigger: { trigger:".section-services", markers:true, start:"10% 50%", end:"bottom 70%", pin:".left-quote", onComplete: () => ScrollTrigger.refresh(), anticipatePin: 1 } }) } servicesTl.from(".left-quote span", 1, {opacity:0, ease: Power3.easeInOut}) .to(".left-quote span", 0.5, {backgroundSize:"100% 100%", ease: Power3.easeInOut},"=-0.5") .to(".left-quote span", 0.5, {color:"#fff", ease: Power3.easeInOut}, "=-0.4") edit: seems that my .left-quote starts with left:0; and then jumps to something like left: 167.875px; (depending on the size of the window i guess) i know this is probably very broad, but thanks anyways!! video.mp4

PointC thanks for the quick replys. Ok so that's what i thought as well! i tried it, and well this code is online right now... i don't know if you see the two sections on the url i sent earlier, but what happens is that ony of the draggers you use works just fine. Then, when you scroll to the next one, it looks as the clipPath is updating on both, and right when you move the .... I JUST GOT IT. haha.. the problem was gsap.set(".logo-old", { clipPath: `inset(0px 0px 0px ${x}px)` }); has to be let clipper = section.querySelector(".logo-old") gsap.set(clipper, { clipPath: `inset(0px 0px 0px ${x}px)` }); !!! Thanks for all the help!

PointC Sounds logic. However, being a bit new at all this, i'm confused for the set() part you're referring to. gsap.utils.toArray('.section-avant-apres').forEach((section, i) => { let myTarget = section.querySelector(".dragger"); Draggable.create(myTarget, { type:"x", bounds:".logo-new", onDrag: function() { let x = gsap.getProperty(this.target, "x") gsap.set(".logo-old", {clipPath: `inset(0px 0px 0px ${x}px)`}) } }) }); This probably makes NO sense LOL... but again, i'm new to this..

Hello, i was able to create a draggable before after logo reveal! However, i need to add a second one on the same page. When i do that, they both work but one updates the other, sort of.. You can see the working example here: https://idylliq.ca/portfolio/faucon/ And here is my code: gsap.utils.toArray('.section-avant-apres').forEach((section, i) => { if (window.matchMedia("(max-width: 689px)").matches) { gsap.set(".dragger", {x:"50"}) } else { gsap.set(".dragger", {x:"450"}) } Draggable.create(".dragger", { type:"x", bounds:".logo-new", onDrag: function() { let x = gsap.getProperty(this.target, "x") gsap.set(".logo-old", {clipPath: `inset(0px 0px 0px ${x}px)`}) } }) }); i'm hoping just by looking at the javascript, you'll know whats wrong... Thanks!

Hey @GreenSock! Of course! I think my question was not formulated the way i wanted... It was less of a hide-it-i-don't-want-it-stolen, and more of a "how do other sites do it it's all tidy and clean!" I sure understand the whole honor system and find it awesome! (helped me a lot) For a while now, i've been trying to figure out my whole "process" when it comes to wordpress sites, meaning minifying, cleaning, optimizing, automatizing several recurrent tasks, as i build many many wordpress sites. But in the everyday work, i never take enough time to "structure" my workflow. @Cassie thanks for that! It's basically a minifier right? @JIZA i'll take a look, see? i didn't even know stuff like that existed lol! Anyways guys, i can definitely say ever since i've started using GSAP, my work exponentially improved. It basically changed my life (workwise :P) And if anyone wants to share their workflow with wordpress + gsap + etc, let me know we could chat maybe elsewhere since this isn't a wordpress forum! Thanks for the awesome stuff!!

Hey kodralex, Did you try using transformOrigin ? var rotate = gsap .timeline({ scrollTrigger: { trigger: '.wrapper', scrub: 0.2, start: '-50px', end: '0px', markers: true, }, }) .to('.square', { rotation: 199, transformOrigin: "100% 100%", duration: 2, ease: 'none', });

Hello all! I usually build wordpress sites and properly enqueue gsap and my custom script js files. Since i am a greensock member, i have some gsap files i don't want to be copyable from my site. However, when i inspect page, and go to network or source, i can easily find my files. There must be a way i don't know of to hide those? Thanks!

Ok thanks! I will definitely look at your article and learn JavaScript LOL I just need time to get started!!

Ok, thanks for the response. I don't have a codepen demo.. because i really think it's about coding logic, which i don't know about haha! i'm here so far... any ideas? because i know that i have to use a callback, but the problem is i don't know how (again, i'm starting in coding...) Any pointers would help a lot! so far i have been able to come up with this: function playThis() { var animData = bodymovin.loadAnimation({ container: document.getElementById('led-container'), renderer: 'svg', loop: false, autoplay: true, path: '/wp-content/uploads/anims/3-LED-light.json' }); } ScrollTrigger.create({ trigger: "#led-container", duration:"100%", markers:true, start: "top 50%", toggleActions:"play null reset reset", onEnter: playThis, }) But the problem is that instead of playing the animation everytime i scroll into view, it DUPLICATES my #led-container element. i know it's stupid, but i'm going insane... Any ideas? _____ UPDATE I GOT IT TO WORK!!!! but i'm sure my code is all over the place and not the right syntax.... Anyhow, here it is: var ledData = { container: document.getElementById('led-container'), renderer: 'svg', loop: false, autoplay: false, path: '/wp-content/uploads/anims/3-LED-light.json' }; var vertData = { container: document.getElementById('vertical-container'), renderer: 'svg', loop: false, autoplay: false, path: '/wp-content/uploads/anims/2-vert-growing.json' }; var ledAnim = bodymovin.loadAnimation(ledData); var vertAnim = bodymovin.loadAnimation(vertData); function playLED (animData) { ledAnim.play(); } function playVert (animData) { vertAnim.play(); } ScrollTrigger.create({ trigger: "#led-container", duration:"100%", markers:true, start: "top 50%", toggleActions:"play null reset reset", onEnter: playLED }) ScrollTrigger.create({ trigger: "#vertical-container", duration:"100%", markers:true, start: "top 50%", toggleActions:"play null reset reset", onEnter: playVert }) i'm sure there's a cleaner more efficient way to do this.. i have about 10 animations to add to this... What do you think?

I am almost ashamed to ask this question... i'm starting to code, but never really learned functions and such. Always found bits of answers online (thanks google) So here is my problem. i've been struggling for days now, and it drives me crazy because i don't know how to code it. Pretty sure it's VERY simple: i have an animated svg (done with lottie - a designer sent it to me) and i can fire the animation on my page no problem. However, it starts on page load. I want it to start when i scroll to a trigger, with scrollTrigger. Here are my 2 bits of code: // lottie svg anim var animData = bodymovin.loadAnimation({ container: document.getElementById('led-container'), renderer: 'svg', loop: false, autoplay: false, path: '/wp-content/uploads/anims/3-LED-light.json' }); //scrollTrigger var tl = gsap.timeline({ scrollTrigger: { trigger: "#led-container", duration:"100%", markers:true, start: "top 50%" } }) tl.play() i KNOW they aren't connected together, and that's the problem... i don't know how to... Maybe with a callback? but again, i don't know how to make a callback... :( Please help me out!!