Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Jo Mourad

ShockinglyGreen
  • Posts

    9
  • Joined

  • Last visited

About Jo Mourad

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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!
  2. 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..
  3. 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!
  4. 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!!
  5. 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', });
  6. 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!
  7. Ok thanks! I will definitely look at your article and learn JavaScript LOL I just need time to get started!!
  8. 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?
  9. 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!!
×