Jump to content

PointC last won the day on June 15

PointC had the most liked content!

PointC

Moderators
  • Content Count

    3,113
  • Joined

  • Last visited

  • Days Won

    281

Everything posted by PointC

  1. If you only specify the rx (or ry) attribute, the browser assumes the missing value is equal to the one you specified. I don't think I've ever used the convertToPath() method with a missing attribute like that so I've never seen that happen. @GreenSock should be along later with additional details. For now if you specify both the rx and ry attributes you should see the desired output. Happy tweening.
  2. I'd go with a steppedEase. You can even use a stagger and cycle if you like. https://codepen.io/PointC/pen/qzNZjd Happy tweening.
  3. Hi @Daniel Hult, Welcome to the forum and thanks for joining Club GreenSock. ScrollMagic isn't a GreenSock product, but I'll answer this for you. You're pinning the .trigger2 div which is a child of the middle section. If you want the next section to wait for the pin, you need to pin the parent section of trigger2. https://codepen.io/PointC/pen/jjqqLX ScrollMagic also has a support area here: https://github.com/janpaepke/ScrollMagic/issues And premium support here: https://support.scrollmagic.io/ Happy tweening and welcome aboard.
  4. Are you trying to draw that line? You can use the drawSVG plugin for that. https://greensock.com/drawSVG
  5. Sorry, I don't understand the question. You're animating the opacity and x position which all seem to be working correctly. Is that not the desired result? More details would be helpful. Thanks.
  6. If you're animating groups you need to add a parent group to it and apply the clip-path to the parent. https://codepen.io/PointC/pen/pXgxwm Happy tweening.
  7. You're dragging a position:fixed image. /* change this */ div.on { position: fixed; bottom: 200px; right: 200px; } /* to this */ div.on { position: absolute; bottom: 200px; right: 200px; } https://codepen.io/PointC/pen/pXgeya
  8. PointC

    Greg M

    https://codepen.io/PointC/pen/JQGRpP
  9. PointC

    Greg M

    Here's a basic setup. https://codepen.io/PointC/pen/MMKjyG Happy tweening.
  10. PointC

    Greg M

    It sounds like you'd want to set dragClickables to false. From the docs. dragClickables: Boolean - By default, Draggable will work on pretty much any element, but sometimes you might want clicks on <a>, <input> <select>,<button>, and <textarea> elements (as well as any element that has a data-clickable="true"attribute) NOT to trigger dragging so that the browser's default behavior fires (like clicking on an input would give it focus and drop the cursor there to begin typing), so if you want Draggable to ignore those clicks and allow the default behavior instead, set dragClickables:false. (note: before GSAP 2.0.0, dragClickables was false by default) https://greensock.com/docs/Utilities/Draggable Hopefully that helps. Happy tweening.
  11. I think you're looking for the DirectionalRotationPlugin. https://greensock.com/docs/Plugins/DirectionalRotationPlugin Happy tweening.
  12. Hey @mikel I'm not sure I understand the question, but changing the timeScale() of an animation won't change the duration. A 1 second animation with timeScale(4) will still have a duration of 1 second so the playhead time() will still travel from 0 to 1 and not 0 to 0.25. Does that help at all?
  13. Works fine in FireFox for me. What version and OS are you seeing this behavior?
  14. Your stylesheet is targeting the class .container rather than the ID #container. The bounds are set to #container. Please try setting the bounds to .container and I think you'll be good to go. Happy tweening.
  15. I'm not seeing anything odd, but I'm guessing you're referring to FOUC. (Flash of Unstyled Content). We've had some discussions about it. Here's a post that should be helpful. This may be helpful as well. https://gist.github.com/johnpolacek/3827270 Happy tweening.
  16. The easiest way would be to set bounds to a container and the container would have a width of 100vw. But you can certainly use a variable as the minX/maxX value for the bounds. Keep in mind that you'll need to applyBounds for a resize event in a case like that. https://greensock.com/docs/Utilities/Draggable/applyBounds Happy tweening.
  17. It looks like that rule isn't being applied to the container on larger screens. You're only setting that height on max 750px in the media query. If you change that, I think you'll be all set. Happy tweening. PS The media query block also isn't closed — just FYI.
  18. Your #container bounds has no height. It's 0 pixels tall so the draggable element always snaps back to the top of it.
  19. If you just need all the original sizes and positions before transforms, getBBox() should work fine. After transforms have been applied is a different story. Blake has a good write-up here: Happy tweening.
  20. Maybe I'm not understanding this project, but why does each child need to a be a new SVG? Couldn't they just be groups of elements?
  21. Yeah, addEventListener isn't gonna work with a jQuery object like that. Here's a quick starter demo to loop through a node list and add a click listener without any jQuery involved. https://codepen.io/PointC/pen/bPVeNd Does that make sense? Happy tweening.
  22. Well, if you need to do this with ScrollMagic, I think you'll have to set a duration of 1 in the scene parameters. Maybe something like this: https://codepen.io/PointC/pen/bPVpWJ I'd also recommend just tweening the properties you need rather than changing classes. Since this is a ScrollMagic question (not a GreenSock product), you can ask additional questions in their support area: https://github.com/janpaepke/ScrollMagic/issues Or they also have premium support here: https://support.scrollmagic.io/ We're happy to help with GSAP related questions or problems. Happy tweening.