Jump to content

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

Cassie last won the day on June 13

Cassie had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by Cassie

  1. Hi there. I don't have an android device. So could you do me a favour? Could you remove GSAP and Draggable from your pen, test it and let me know if it's still broken?
  2. Well. SVG is scalable by default (Scalable Vector Graphic) so you're starting off at a good point. If you want to control how the SVG 'fits' into the space you define you'll want to look at preserveAspectRatio. The 'meet' and 'slice' values allow you scaling control like background-size background-size:cover => preserveAspectRatio="xMidYMid Slice" background-size:contain => preserveAspectRatio="xMidYMid Meet" And the X and Y Min/Mid/Max values are like position If what you want's too complex for simple resizing you could also draw two different paths (o
  3. You hadn't included the scrollTrigger library 🙃 It's not part of GSAP's core! You can add markers too if you want to see where each section is triggered https://codepen.io/cassie-codes/pen/be0013b7933073d2b2ca5707533680f9
  4. That's going to be a tough one from where you're at right now. It's not something GSAP can do for you - it's all in the SVG setup It's not impossible, but you'd be getting into generating your own SVG paths with JS based on the height of the container. If it's an exercise in SVG path syntax you're after I'll happily talk you through and link you to the things you'd need to know for this. If you just want the visual effect I'd probably suggest drawing out the path the length you want in a graphics editor from the start.
  5. It's always good to pop in a demo so we know what you've tried. I assume you're trying to use HTML DOM methods on an SVG element though. You're probably looking for tspan.textContent instead of tspan.innerText https://codepen.io/GreenSock/pen/bGqYGrm?editors=1111
  6. Heya. If you take out all references to z GSAP won't animate the z value https://codepen.io/GreenSock/pen/rNyYNMB Also, a few notes on your setup. Preserve 3d and perspective belong on the parent - they're setting the 3D space up - then you'll want to animate the child within that. Hope this codepen helps! https://codepen.io/GreenSock/pen/gOmGVQO One of the reasons I think you may not be getting the result you're expecting is because CSS transforms stack and the order effects the result. https://codepen.io/amit_sheen/pen/36700c92aaafb432ebe2efb69d26d7a8
  7. We have a forum for freelance jobs. There are a lot of talented folks hanging out there. Feel free to make a post explaining the help you need - maybe someone over there can help you? https://greensock.com/forums/forum/15-jobs-freelance/
  8. The opposite direction maybe? Coming from random values and ended up at predefined values? This is how I'd do it - https://codepen.io/GreenSock/pen/YzZrEPV note, I've updated to new GSAP3 syntax and changed the CDN link too.
  9. TIL - that's cool.
  10. Maybe this page of the three.js docs will help? Looks like you can autoRotate a camera around a target. https://threejs.org/docs/#examples/en/controls/OrbitControls
  11. Hey pal! Hard to say by looking at these snippets, could you make a minimal demo so we can help a bit more effectively?
  12. Hey there! If you're just trying to use the above code snippet you just have to swop out tweenLite for gsap and move the duration a little. (although it will still work with the duration outside of the vars object.) If you need more help could you make a new forum post? TweenLite.to(sprite, 1, { pixi: { alpha: 0.5, x: 100, y: 100, scale: 0.5 }}); // would be gsap.to(sprite, {duration: 1, pixi: { alpha: 0.5, x: 100, y: 100, scale: 0.5 }});
  13. JACK. This is amazing. 😂 Best forums of all time.
  14. Hey pal! I'm not sure that I'd approach this in this way. It seems like there's some logic overlaps, you're repeating yourself a bit and it's not really easily extendable. How about something like this? https://codepen.io/cassie-codes/pen/bbb98c6a854a823544b16342ae7a012e?editors=1010 I've commented the code so you can see what's going on - But the main idea is to loop through the sections, and when the sections are leaving or coming back in to the viewPort, adjust the position of the list. I've tweaked some CSS too to make the list adjustment line up with the border you s
  15. Yeah - fair enough. If it needs to be perfectly centered this route won't be the one! It's definitely an easier option though.
  16. Hi pal, I replied to your other question. Here's the pen I linked to to demo toggleClass https://codepen.io/cassie-codes/pen/ba2c5243a07686ef1fdbcb0f9c76a10b Here's a demo to show when the events that influence the toggleActions states fire - https://codepen.io/cassie-codes/pen/e5a513ccbf59d14b207e080793407167 Hope this helped - In future can you avoid posting duplicates, as it can double the effort put in from folks trying to help and make things a bit confusing. Thanks!
  17. Heya! You can use toggleClass like this... https://codepen.io/cassie-codes/pen/ba2c5243a07686ef1fdbcb0f9c76a10b If you have any more questions, can you start a new thread? Thanks.
  18. 1) You can make SVG lines draw in reverse by using negative values. https://codepen.io/cassie-codes/pen/6c488770e1fafb9a05cf3d2a7e23b2e8 Could you put the bee in the SVG? Then you could just transform the SVG position on scroll like this. https://codepen.io/cassie-codes/pen/2dae9b5123c33d36e5d2069bc7da17e2
  19. Yay George dropped in! Lovely to see you in here pal. 🙌
  20. Pouvez-vous créer une nouvelle discussion sur le forum avec une démo sur CodePen et posez votre question en utilisant Google Translate?
  21. Ah, yeah, this is a hurdle everyone hits - it's even in the 'most common GSAP mistakes' - https://codepen.io/GreenSock/pen/mdVPOQV?editors=0010
  22. There's also this thread on animating between labels if you're interested - but I would probably stick with the above solution! TLDR let master = gsap.timeline({paused: true}); master.to(...); // do whatever master.addLabel("label1", 2).addLabel("label2", 5); let labelTween = master.tweenFromTo("label1", "label2"); ScrollTrigger.create({ animation: labelTween, ... });