PointC last won the day on October 18

PointC had the most liked content!

PointC

Moderators
  • Content count

    1,646
  • Joined

  • Last visited

  • Days Won

    133

PointC last won the day on October 18

PointC had the most liked content!

Community Reputation

3,623 Superhero

4 Followers

About PointC

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

16,353 profile views
  1. PHP not playing nice with Draggable

    Hi @Nineve Welcome to the forum. I'm not exactly sure what you mean by draggable messing up div sizes, but the first thing I'd recommend trying is switching to the latest version of TweenMax and Draggable. The version you're using (1.16.1) is over two years old. Here are the links: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/utils/Draggable.min.js"></script> I'm not sure if that will solve the problems you're experiencing, but it's worth a shot. To better assist you, we'd like to see a demo of the problem. If you could create a CodePen for us, that would help in providing you with the best answers. Here's some info about that. Thanks and happy tweening.
  2. Timeline - call/pause/resume

    @Dipscom - you're right about that, but at the time I posted that answer, I was writing my new post for CodePen that promotes the GreenSock brand so hopefully @Carl won't take away my Moderator Badge.
  3. Positive and negative points of Greensock

    Negatives??? How dare you. Just kidding. If you hear anyone mention negatives about GSAP, it will probably be something about that fact that it's JavaScript and too hard to learn or the scripts increase the size of pages. Some may claim that CSS animations are better or faster. Most of that is not true and I'd bet most of the people that make those claims have never even tried GSAP. Here are a few blog posts that may be of interest to you: https://greensock.com/jquery https://greensock.com/transitions https://greensock.com/css-performance About the only other negative I've seen mentioned is that some of the premium plugins are not free. I personally wouldn't think of that as a negative, but there are those that think everything on the web should be completely free. In fact, most of the GSAP tools are free to use. The premium bonus plugins are part of Club GreenSock which is what keeps things moving around here. You'll find many examples of libraries that were free and are no longer around. GreenSock has been actively developing for over 10 years and the updates/fixes happen frequently. It's a pretty special collection of tools. As Sir @Jonathan mentioned, it will make your work easier & more fun and the community is unlike anything I've ever seen on the interwebs. Good luck on your project and happy tweening.
  4. Timeline - call/pause/resume

    Good grief!! Shame on me. How did I not link to that awesome new CSS Tricks article and videos? I shall now go sit in the corner and think about what I've done. (or rather, didn't do)
  5. I was just about to post something similar to what Sir @Jonathan did. All looks fine to me in IE11. It has been almost two years since MS has updated IE10 so I would also recommend letting that browser fade into history. Happy tweenng.
  6. The first element is not hitting the trigger on page load. If you want it to fire immediately, it needs to be beyond the triggerHook on page load. For different animations on each element, you can put those into an array and use the index of the jQuery each() loop to create the tween/timeline. Here's a fork that adds those options. Happy tweening.
  7. Hi @DD77 Welcome to the forum. As @Shaun Gorneau mentioned, you'd want to set the reverse property to false if you only want to trigger the element once. I also noticed you have a transition in your CSS. That's going to cause a fight for control between GSAP and CSS. You're also using a really old version of ScrollMagic. Here's a fork of your pen with the latest version and using the addIndicators and GSAP plugins. Hopefully that helps. Happy tweening.
  8. Timeline - call/pause/resume

    Hi @karpec When you create a timeline in a function like that, you'd want to return it to the function and then add() it to your master like this: myTimeline.add( down() ); You need those parentheses in the add method. The way you have it now, all the functions are just firing right away so nothing is chaining the way you want it. Here's a basic example of returning timelines to functions and then adding to a master: See how all the functions return the timeline? This demo also shows how you can use the position parameter when adding them to the master. If you have additional questions, a CodePen demo is the way to get the best answers. Here's some info about that: Hopefully this helps a bit. Happy tweening.
  9. Loop within scrubbing timeline

    o.k. - if the timeline is repeating, we just need to change from setting the time() with the scrubber to setting totalTime(). That would then include repeats and delays whereas time() does not. Here's a fork of your pen in which I commented out the loops timeline and just used the repeating redBall timeline controlled with the scrubber and based on the time of mainTL. Does that help? Happy tweening.
  10. Loop within scrubbing timeline

    Hi @spacewindow When you add an infinitely repeating nested timeline to your master, your master will now infinitely repeat. If it were me, I'd leave the red ball timeline on its own and set its time based on the time of the master as you scrub it. Something like this: Does that help at all? Happy tweening.
  11. My Timeline is not looping from the beginning

    You got your blue div to move across the screen? Pretty advanced stuff. I could only get my first div animation to rotate. Moving across the screen came much later in my training.
  12. My Timeline is not looping from the beginning

    Hi @Pcooney Welcome to the forum. I took a look at this earlier today, but hadn't had a chance to post a reply until now. As @Carl mentioned, it looks like you've got it working now. The problem with your earlier version was the negative relative position parameter offsets. You were animating rotation and y, but the next tween (with the negative overlap) was also animating those properties so an overwrite was occurring and messing up your loop. I see all those position parameters are gone now so I'm assuming you already had this figured out, but thought I'd mention it just in case. If you don't want to use that 2 second tween at the beginning and end of the timeline, you can use {delay:2, repeatDelay:2} in your timeline vars object as well. That will give you 2 seconds at the beginning of the first iteration and each loop. Cool animation- nice work. Hopefully that helps a bit. Happy tweening and welcome aboard. @Carl - I like that skateboarder. Was that really your very first animation?
  13. Why Cant i animate this SVG with svg Draw

    You're most welcome. That's the GreenSock experience. Thank you for supporting GreenSock with your Club membership. Please let us know if you have additional GSAP questions. Happy tweening.
  14. immediateRender doesn't work with nested timelines

    Hi @sebHewelt A couple things and you'll be good to go. You're using 'initialRender:false' in your pen when you should be using 'immediateRender:false'. That immediateRender property should be on the tween, rather than the timeline. So you have a couple options to get things working. You can write your set() like this: subTl.set(canvas, {visibility: 'visible', immediateRender:false}); You can also create your nested timeline in a paused state and then add it to the master like this: masterTl.add( subTl.play() ); Either way should get you to your goal. Hopefully that helps. Happy tweening.