PointC last won the day on April 20

PointC had the most liked content!

PointC

Moderators
  • Content count

    1,988
  • Joined

  • Last visited

  • Days Won

    159

PointC last won the day on April 20

PointC had the most liked content!

Community Reputation

4,794 Superhero

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

20,575 profile views
  1. Non-passive Events being called out in newer Chrome

    Helpful Chrome? Isn't that an oxymoron?
  2. Timeline loop at end go to another image

    You'd need to animate or set the opacity of new image in the callback. Here's another fork where I've added a 4th frame which appears at the end of the timeline. Happy tweening.
  3. Timeline loop at end go to another image

    Hi @tombra Welcome to the forum. I may not be understanding the question here, but couldn't you set the timeline to repeat a few times and then use an onComplete callback to show another image or play a new animation? Something like this: Doe that help? Happy tweening.
  4. Scrollmagic parallax + sidebar navigation

    I'm seeing some weirdness lately. I can confirm that Chrome 66 stutter that @Shaun Gorneau mentioned too.
  5. Whatsup Guys?

    Oh... I have to disagree with @Sahil. You don't want to wander over to the other side of the forum. It's Thunderdome over there. @Sahil is a force to be reckoned with as he charges towards a membership in Comma Club.
  6. Forget Avengers: Infinity War. This summer’s must-see film is the latest offering from GreenSock Studios. Grab the kids and head to local multiplex for the next showing of ‘Easy SVG Drag and Drop with GreenSock's Draggable’ Academy award winning director Carl Schooff transports the audience into the jungle of SVG with his mastery of the craft. He knows how to get the most from his .icon actors. The fade and scale performances are completely believable and sure to win a multitude of awards. Nice job @Carl I honestly have no idea how someone could watch one of your videos and not immediately start using GSAP after seeing how easy it is to use.
  7. Draggable snap

    Hi @SimonDucak Looks like you just missed the ThrowProps plugin in your demo. Here's the CodePen version: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js Happy tweening.
  8. sequence-video without jquery

    You still have an infinite timeline in your bunnyInTheBack() function which will cause problems with the master timeline progress() slider. // this is a problem const bunnyInTheBackTl = new TimelineMax({repeat:-1, repeatDelay: 10}); If you want that rabbit to pop up/down forever, I'd recommend making it a separate tween or timeline so it doesn't cause problems with your masterTl. Or you could set it to just a couple repeats if you prefer to leave it as part of the master. Happy tweeing.
  9. sequence-video without jquery

    It looks like Shaun is working on an answer, but I'll jump in quick while we wait for his reply. You've got a couple issues with the project. To wire things up from my demo to your project, you'd need to target your masterTl timeline with the draggable element and all the event handlers. 1. Wiring a slider up to an infinite timeline (you have repeat:-1 on several nested timelines) is tricky. I would imagine you'd want users to be able to scrub the animation from start to finish so I've removed the repeats in my fork. 2. The other issue is setting the dragger bounds to 100% instead of a fixed width. This can work by getting the width of the bounds and restricting the dragger to those coordinates. The trick is on resize. You need to listen for a resize event and set new bounds as well as re-position the dragger correctly so it's at the same percentage point of the new bounds. Here's a fork of your pen with everything working correctly. Happy tweening.
  10. sequence-video without jquery

    I prefer Draggable for that type of control. Something like this: Hopefully that helps. Happy tweening.
  11. sequence-video without jquery

    A good site to bookmark. http://youmightnotneedjquery.com/ Happy tweening.
  12. I have a problem with "rotate"

    Hi @dimka Welcome to the forum. It looks like you're trying to create a timeline, but your pen isn't loading TimelineLite or TimelineMax. It's usually easiest to load TweenMax which includes the following by default: TweenLite TweenMax TimelineLite TimelineMax CSSPlugin AttrPlugin RoundPropsPlugin DirectionalRotationPlugin BezierPlugin EasePack Here's a fork of your pen with that change. Hopefully that helps. Happy tweening.
  13. Moving Clouds

    You'd need to write it like this: .add(clearStage(), 0) .add(cloudsMoving(), 1) .add(enterFloorVegetation(), 0) Right now, you have the label names in the position parameter spot and the 1 and 0 are over in the align spot which only applies in the case of an array. More info about add(). https://greensock.com/docs/TimelineMax/add() You could also add a label and then start the nested timelines at the label like this: .add("someLabel") .add(cloudsMoving(), "someLabel+=1") .add(enterFloorVegetation(), "someLabel") Hopefully that helps. Happy tweening.
  14. Moving Clouds

    Do you mean in your go() function where you build the master timeline? If that's the case, I'd just use a position parameter of 0 to start any/all of the nested timelines at the same time. Happy tweening.
  15. Moving Clouds

    Hi @Josefina I'd certainly follow @OSUblake's advice. It's a great way to get repeating clouds. That being said, I thought I'd throw my two cents worth out there for you. What you were doing by moving the cloud to x:-2400 can move it off the stage, but then the cloud movement was x:"+=3000". That setup actually only animated to x:600 from its original position (0-2400+3000) which simply wasn't far enough to go beyond the right side. Here's a basic example with the same width as your SVG and a circle path standing in for the cloud. I've set the SVG overflow to visible so you can see where things are landing. You can see that moving it to -2400 does indeed move far enough to the left, but a 3000 unit move is not enough to go off the right side. SVG coordinates can be a bit confusing sometimes so hopefully that helps a bit. As I said, Blake's approach is great and I'd recommend following his advice for some easy repeating clouds. Happy tweening.