GreenSock last won the day on June 27

GreenSock had the most liked content!

GreenSock

Administrators
  • Content count

    11,078
  • Joined

  • Last visited

  • Days Won

    308

GreenSock last won the day on June 27

GreenSock had the most liked content!

Community Reputation

4,285 Superhero

3 Followers

About GreenSock

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    Chicago Area
  • Interests
    Volleyball, Basketball, Christian Apologetics, Motorcycling

Recent Profile Visitors

42,428 profile views
  1. Okay, if you don't want it staggered, you can just use a regular to() call: var introTimeline = new TimelineMax(); introTimeline.to(".Ele1", 1.5, {scale: 2, fill: "white", ease: Power2.easeIn} ); introTimeline.to(".Ele2", 1.5, {scale:1, fill: "cyan", ease: Power2.easeIn} ); Again, I may be misunderstanding the effect you're after. It'd help if you elaborated a bit about exactly what you want. If you want it to just animate to scale:2, fill:"white" and then go back to what it was originally, it'd be as easy as: var introTimeline = new TimelineMax(); introTimeline.to(".Ele1", 1.5, {scale: 2, fill: "white", ease: Power2.easeIn, repeat:1, yoyo:true} ); Have you watched the "getting started" video yet? http://greensock.com/get-started-js/
  2. Yeah, maybe ask the Framer folks. You could also try taking the CustomEase file out of the "easing" folder and putting it in the root directory alongside TweenMax. Just guessing.
  3. I'm not quite sure I understand the effect you're after, but if you're wanting to stagger the animations, you could do this: var introTimeline = new TimelineMax(); introTimeline.staggerTo(".Ele1", 1.5, {scale: 2, fill: "rgba(255,255,255,1)", ease: Power2.easeIn}, 0.2 ); introTimeline.staggerTo(".Ele2", 1.5, {scale:1, fill: "cyan", ease: Power2.easeIn}, -0.2 ); Notice the "0.2" at the end of the first line and "-0.2" at the end of the second - those are the stagger amounts. Use whatever values you want. A negative value reverses the order of the array. Again, I suspect that I don't understand the effect you want, but hopefully this nudges you in the right direction.
  4. We are indeed hoping to push 1.20.0 out by the end of this week at the latest. Feel free to use that beta if you want for now.
  5. I'm not quite sure how you're loading CustomEase into the Framer environment, but it sure does sound like that's the core issue - it's not loading CustomEase. Remember, CustomEase is in the "easing" folder of the download zip. How are you loading TweenMax exactly? Does Framer just look for any JS files in the root directory, so if TweenMax is there it loads it? (Sorry, I'm not familiar with Framer).
  6. It sounds like you probably just don't have the CustomEase file loaded (?) Just a guess. Like Jonathan said, it'd be super helpful to see a reduced test case. Happy tweening!
  7. Browser support for filters isn't very good, and GSAP can't really "fix" that. It doesn't claim to support filters natively. But since you can animate any property of any JS object, you can certainly cobble together your own solution for browsers that do support it, like that codepen you linked to. Also keep in mind that GSAP can isolate individual numeric values inside more complex strings, and as long as they're in the same order, it'll animate them beautifully. Example: var filters = {value:"blur(15px) drop-shadow( 10px 10px 15px rgba(255,255,255,.7) )" }; TweenMax.to(filters, 2, {value: "blur(0px) drop-shadow( 0px 0px 0px rgba(255,255,255,.7)", onUpdate:function() { element.style.filter = filters.value; }}); Does that help?
  8. I wonder if you accidentally tried to call staggerFromTo() on TimelineLite as a static method instead of an instance method: //BAD: TimelineLite.staggerFromTo(...); //GOOD: var tl = new TimelineLite(); tl.staggerFromTo(...); Anyway, I'm glad you got it working
  9. It looks like the problem is that TweenMax.staggerFromTo() returns an ARRAY of tweens, but you're treating it like it returns a tween instance. In other words, you're trying to call kill() on an array instance. I'd probably just use a TimelineLite instance's staggerFromTo() instead of TweenMax.staggerFromTo() so that those tweens are wrapped in a timeline that can be killed easily, or you could just loop through the tweens in the TweenMax.staggerFromTo() array and kill() each one. Does that help?
  10. It's a little tough to know how to structure things best without knowing more about all the functionality you need, but I'll take a stab at a slight rewrite... // empty object to hold photos and their relevant parts const eic = {}; function createExpandingButtons( pre, id ) { // store the various parts of the photo caption var obj = { button: id.find( '.button' ), arrow: id.find( '.button span' ), caption: id.find( '.caption' ), state: true }; eic[ pre ] = obj; obj.button.on( 'click', { pre: pre }, function() { //toggle the state obj.button.state = !obj.button.state; if (obj.button.state) { obj.caption.css( 'position', 'absolute' ); TweenLite.to( obj.arrow, 0.5, { rotation: 90, ease: Power4.easeOut } ); } else { obj.caption.css( 'position', 'relative' ); TweenLite.to( obj.arrow, 0.5, { rotation: -90, ease: Power4.easeOut } ); } }); } // example of creating one such photo caption createExpandingButtons( '$indexHero', $( '#index-hero' ) ); It just seemed a bit cleaner to be able to reference things like eic[ pre ].button, plus we're using a local "obj" variable that'll be faster to lookup. There are definitely ways to use ternary statements to make your code shorter, but that can also make it a bit less readable so it's not necessarily "better". Happy tweening!
  11. DrawSVGPlugin is only intended for SVG, not for PixiJS/canvas. However there's probably a way to creatively merge the two with enough effort. Unfortunately it's not something I have time to craft for you at the moment. Perhaps @OSUblake will swing by and lend some wisdom. He's usually a wiz at this stuff since he's great with PixiJS and SVG.
  12. You can use the position parameter, either by hard-coding an absolute time value or by dynamically grabbing the endTime() of the most recently-added child (and make sure you set the "includeRepeats" parameter to false): tl.to($parpadeo, 0.7, {fill: '#FF981D', autoAlpha: 0.7, repeat: -1}) .to(otherThing, 0.7, {fill: 'purple'}, tl.recent().endTime(false)); To learn more about the position parameter, see http://greensock.com/position-parameter.
  13. You should be able to TweenMax.pauseAll() and then individually call play() on an instance. If it's not working, I suspect that you've got that instance nested inside of another timeline that's paused. Remember, the way an animation plays is that its playhead moves over its surface, and its playhead is controlled by its parent timeline. That's why if you pause() a timeline, none of its child tweens play. Same goes for nested timelines. If you're still having trouble, please post a reduced test case in codepen that demonstrates the issue and we'll do our best to help.
  14. We'll definitely look into the problem with the contact-us form. We were launching some updates to the site last night and it sounds like maybe that was a side effect. As for the license, just because you're using GSAP in an e-commerce site doesn't in-and-of-itself require the special commercial license, no. It's only necessary if you're charging multiple customers for something that actually uses GSAP itself. For example, an app or a web site that has a "members-only" area with content that's not freely available to the rest of the web, or a game that has microtransactions for unlocking features. But if you have a web site that sells widgets, for example (which of course don't use GSAP themselves), charging people for those widgets doesn't necessitate the commercial license. Does that clear things up? Thanks for taking the time to ask about this and make sure you're honoring the licensing terms. You're exactly the type of customer we like to serve. Our whole licensing model relies on the honor system. Read about it here: http://greensock.com/why-license/ Happy tweening!
  15. Sorry, @Redhawk but svgOrigin is not available for regular DOM elements. Maybe if you created a new topic and included a reduced test case in codepen showing that demonstrated what your goal is, we might be able to help you with some other idea.