PointC last won the day on August 19

PointC had the most liked content!

PointC

Moderators
  • Content count

    1,462
  • Joined

  • Last visited

  • Days Won

    113

PointC last won the day on August 19

PointC had the most liked content!

Community Reputation

3,155 Superhero

4 Followers

About PointC

  • Rank
    Moderator

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    Seattle area
  • Interests
    web design, motion graphics, 3D animation, video production, all things sci-fi, Mt. Rainier hiking and my dachshunds

Recent Profile Visitors

15,090 profile views
  1. Thanks for the updated demo. I think I understand what you're trying to do. You have a set of elements that you want to stagger, but on the first pass, element[0] should not be a part of the stagger, correct? On iteration 1 element[0] is going to do its own animation, but every repeat thereafter it should be a part of the stagger array? If that's the case, there would be a number of ways to make this happen. For simplicity I just made a couple new demos with some divs so we can clearly see what's going on. In this first option I have made two arrays. One with all the boxes and one with all the boxes except .box1 using jQuery's .not() selector. You'll see the result is box1 animating its y position on the first tween and boxes 2-5 rotate. After that, all 5 boxes rotate. Another option would be to create the target array and then splice out the first element. You'd then play your first iteration of the animation and onComplete call a function that recreates the array and staggers all the elements in a new stagger tween. It's the same result, but just a different approach. Personally, I'd go with the 1st option as it's a bit simpler. The bottom line is you need an element to be part of an array for one stagger animation, but not part of it for another so I think that takes a creating a couple arrays or modifying one. Others may have additional ideas better than mine. Hopefully that helps. Happy tweening.
  2. scrollmagic

    HI @Monstreur ScrollMagic is not a GreenSock product and we need to keep our focus here on GSAP related problems and questions. Sometimes ScrollMagic and tweens are involved in the same question, but this looks like something you'd probably want to post here: https://github.com/janpaepke/ScrollMagic/issues If you have GSAP related issues, we're happy to help. Happy tweening.
  3. I'm glad to hear it's working correctly now. Yes - you are correct - you definitely want to create your tweens and timelines before the ScrollMagic scene otherwise it won't be able to take control of them. Happy tweening.
  4. o.k. I think I understand what you're asking now - thanks for the clarification. I assume you're talking about ScrollMagic reversing the tween when you scroll back up the page, correct? If that's the case, the onComplete is not going to get called when the tween reverses. You'll need to call another function onReverseComplete that removes the class on leftBar. My two cents worth: I'd probably put both of those tweens on a timeline so you wouldn't need the callbacks. If that doesn't answer your question, could you please provide a demo so we can see the code? Here's some info about that: Happy tweening.
  5. HI @jzhang172 Welcome to the forum. You said the jason() function should remove that class? Your function is currently adding it again. To remove it you'd need: TweenLite.set(leftBar, {className: "-=active-me"}); Hopefully that helps. Happy tweening.
  6. Glad to hear you got it working @SLSCoder Just FYI - you can make an image part of the SVG and align it to the path. One of the big advantages of that is the image will scale perfectly with the SVG. Here's another fork of your project. I've removed the width and height attributes from the SVG so it will scale up and down. See how the .png works nicely with that scaling? Thanks again for being a Club member and let us know if you have additional questions. Happy tweening.
  7. If you don't want to use TweenMax, you could also look at exportRoot() and control the timeScale that way too. More info: https://greensock.com/docs/TimelineLite/static.exportRoot() Happy tweening.
  8. Thanks Carl. Yeah - I wasn't completely clear in my first response about a target using a path and aligning the target to the path in the MorphSVGPlugin.pathDataToBezier method . I think this can trip people up a bit. You can use any element and follow the path, but if you try to align a non-SVG target to the path, you will get an error. That was the case in this thread:
  9. Oh... you meant you had a blank screen. I thought you meant my demo was blank. You're still linking to a local image. You have this on line 2 <img src="img/logo.png"> You'll see my image has a direct link. <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/314556/hero.png" > That is my asset account on CodePen, but you can link to your own images on your server or just some test images from another server, but you can't leave it the way you have it. That's just looking in your local img folder. Make sense? Happy tweening.
  10. What's a blank screen? The CodePen? Something may be weird with that embed. Here, try a link instead. https://codepen.io/PointC/pen/OjQoVO Happy tweening.
  11. Hi @ekfuhrmann I've read your question a few times and maybe I'm just tired, but I'm not sure I completely understand what you're asking. Do you think you could trim this demo back to just a few of the words you'd like to animate and what you expect to happen? Generally, the simpler the better. Thanks much and happy tweening.
  12. Those pens are using a background image for that div, but have no content. You'll have to set the size of that logo div if you want it to show like that. The other problem on the CodePen is you're linking to your local file directory so no image is loading. Your original question was about animating an image with scr="" so here's a fork of your pen with a sample image in it so you can see everything is working correctly. Hopefully that helps. Just FYI - you don't need the body, head etc. tags in the HTML panel on CodePen. That's all taken care of for you. Happy tweening.
  13. Glad you got it all figured out. The final result looks good - thanks for sharing. Happy tweening.
  14. HI @jmclemoreZynga Welcome to the forum. You should be able to give an image an ID or class and animate it with GSAP. If you could put your question into a demo, we can take a look for you. Here's some info about that. Happy tweening.
  15. Just to follow up. You can make an image follow the path, but it's tricky if the image is not sitting at 0,0. Like this: You'll save yourself a lot of headaches by making the target a part of the SVG. Happy tweening.