Jump to content

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

PointC last won the day on August 14 2019

PointC had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by PointC

  1. Hi @Jiri, I see your post has a lot of views but no answers yet. That's probably because you have so much going on in the demo. Simplified demos make it much easier to troubleshoot. Getting into media queries and responsive layouts is a bit beyond the support we offer around here. We do try to keep the focus on GSAP support. That being said, I think this thread can help. You'll see that thread has a lot of good info and links to other responsive threads. I'd pay particular attention to @OSUblake's demo in that thread with the blue and red squares. It's a nice and simple example to get you started. It's always best to start small and build up. Hopefully that points you in the right direction. Happy tweening.
  2. I must have weekend brain or something as I'm still not understanding everything about this. If you want to play() from a certain point, I think you'd benefit from adding labels to the timeline and then you can do something like this: tl.play("yourLabel"); More info about play(); https://greensock.com/docs/TimelineMax/play() More info about labels and the position parameter. https://greensock.com/position-parameter Hopefully that helps point you in the right direction. Happy tweening.
  3. Hi @Shakespeare, Welcome to the forum and thanks for joining Club GreenSock. I'm not quite following the desired result here. You have one button starting the timeline again with play(0) and you're reverting the split while the other has a restart() only. What is the overall goal here? Just to restart the timeline? Do you need to revert the split for some reason before you restart()? More details would be helpful. Thanks and happy tweening.
  4. I'm not quite sure what you need to happen here, but it sounds like you'd need to create your countdown timeline and set a trigger in ScrollMagic. If it's linked to user scroll speed, you'll want to set a duration in the ScrollMagic scene parameters. If it should play at normal tween speed then you just need a trigger for it. A demo would be very helpful. Just FYI — ScrollMagic is not a GreenSock product. I wrote a post about that here: https://greensock.com/scrollmagic Maybe some of those demos will help. Happy tweening.
  5. Yeah, I'd say overflow:hidden should take care of that for you. Just FYI: rather than a delay on all those loose tweens, I'd recommend looking at a timeline. That will allow you to sequence everything together. https://greensock.com/docs/TimelineMax Happy tweening.
  6. Hi @Trip, Welcome to the forum. I'm not sure I follow the question. Are you talking about transformOrigin? So something like this: TweenMax.to(element, 5, {scale:2.8, transformOrigin:"top left"}); Does that help? If that's not what you meant, a demo of what you're doing would be great. Happy tweening.
  7. If you want Blake to appear you have to say the magic word three times in a row. "canvas canvas canvas"
  8. You don't need two loops and two controllers. I just meant to make a second scene for each section in the each() loop. You can then set the same trigger hook and just offset the second scene by 80% of the element height. I think something like this should work for you. https://codepen.io/PointC/pen/GVqbMK Make sense? Happy tweening.
  9. If I understand your question correctly, I think setting up a two timelines and a second trigger for each section would be the way to go. The opacity --> 1 tween plays when the section hits the first trigger and then the opacity --> 0 tween plays when the element is 80% of the way through the scroll. This is all assuming you want the tweens to play with their actual duration. If you're trying to have them play as the user scrolls then one timeline would be fine. Just set the second tween to play later with a relative position, delay or label. Make sense? Happy tweening.
  10. I did something similar for another forum thread answer. Maybe this will give you some ideas too. https://codepen.io/PointC/pen/KGvZew Happy tweening.
  11. ScrollMagic is not a GreenSock product. There are threads about it here, but it's not officially supported. That being said, check out this post and demo from @OSUblake. We've also discussed smooth scroll at length in these threads. Happy tweening.
  12. How about something like this? https://codepen.io/PointC/pen/bXVPWY Does that help?
  13. Hi @Jiri Welcome to the forum and thanks for joining Club GreenSock. Using a different animation for reverse can sometimes be a bit tricky. Here are a couple threads that may be helpful. That being said, I think a simple toggle would work well in your case. Here's a fork of your pen. https://codepen.io/PointC/pen/wVKRbw Another option is to use one timeline with a pause in the middle. Here are a couple demos I made for different thread answer but they show the general idea. https://codepen.io/PointC/pen/oPELMe https://codepen.io/PointC/pen/GXQWJw Hopefully that info helps. Happy tweening and welcome aboard.
  14. Let's fire up the @Rodrigo React Signal.
  15. Exactly. It certainly works the way you have it now, but each time you click the 'path 1' button you make the calculations and build the tween. If you created all the tweens/timelines in a loop you'd only have to make all those calculations once. You can put all the timelines in an array and trigger them with the button index or some other data attribute. Just my two cents. YMMV. Happy tweening.
  16. PS Check out DrawSVG too. The plugin makes stroke drawing super simple. https://greensock.com/drawSVG It's a Club GreenSock perk. https://greensock.com/club Happy tweening.
  17. Hi @CodeGuy Welcome to the forum. Right now you're adding tweens to the timeline on each click. I'd recommend creating the timeline(s) once and then controlling them as you wish. That being said, you can add this line at the beginning of your draw function. tlm.progress(0).clear(); When you kill() a timeline it's gone forever and released for garbage collection. The element will still be there so you may want to rewind the timeline before you kill() it. The code I posted above just sets the timeline back to 0 and clears out the tweens. You then add the fresh fromTo() tween and you're good to go. https://codepen.io/PointC/pen/mNdoJX Hopefully that helps. Happy tweening.
  18. It's also helpful to use the forum search feature as there have been numerous accordion threads. Here are a couple. If that search doesn't get you what you need, you can always fire up the Google machine and search: site:greensock.com accordion
  19. Sounds similar to these other two topics you posted.
  20. Zach is gettin' all fancy today.
  21. I'd follow the advice above, but If you do want to start a timeline again without resetting the elements you can use .invalidate() https://greensock.com/docs/TimelineMax/invalidate()
  22. Be sure to check out this article too. https://css-tricks.com/writing-smarter-animation-code/ Happy tweening.
  23. Yeah, all the info is in the docs, but you're right. Some things are not immediately obvious when you go to set up a real world project. The best advice I can give is to start with the learning section: https://greensock.com/learning After that you can learn a ton by reading through all the threads here on the forum. Maybe pick a section of the docs to read through each week too. Visiting CodePen and looking for GSAP based pens is always a great way to learn. Find something you like, fork it and then tear it down line by line until you understand what's happening. We're always here if you need any GSAP related assistance. Providing a concise demo (as you did already ?) is the best way to get answers to your problems/questions. Happy tweening.
  24. PS I don't know anything about Adobe XD or how it exports assets, but I wrote a little bit about Adobe Illustrator exports here: Maybe it'll help. Happy tweening.