PointC
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by PointC
-
If I understand your desired outcome correctly, I think you'd want to use svgOrigin instead of transformOrigin. var pieFromLand = { opacity: 1, rotation: -120, svgOrigin: '171 171' }; More info: https://greensock.com/gsap-1-16 Happy tweening.
-
Hi @jemes You should be able to correct that by setting your svg overflow to visible in your CSS or scaling the entire SVG instead of the path. Happy tweening.
-
Well, there you go. Even better.
-
You should be fine. You just can't have the same mask ID. The same class of path that draws the mask should be no problem. Happy tweening.
-
If you watch the animation in the console, you'll see that the second group of masks is drawing correctly and at the right trigger. However, they are not affecting the appearance of the second set of branches. I think the problem is the second SVG is picking up the masks from the first SVG since they have the same IDs. I pulled the branches out of your site and put them into a pen. (Squeeze to a narrow window to watch both at once) Notice the 2nd copy of the SVG has the <defs> commented out and yet the masks are still working correctly. I think you'll have to switch to unique mask IDs.
-
Look at @OSUblake go today - two ScrollMagic answers without rewriting the entire project and using his catchphrase. I find anything involving ScrollMagic much easier to debug with the addIndicators plugin. You'll immediately see if the triggers are where you think they are. http://scrollmagic.io/docs/debug.addIndicators.html
-
Yep - Blake is exactly right. You have to create a timeline for each of the mask groups that are hitting separate ScrollMagic triggers . Declaring the variable inside the loop should take care of it for you. Happy tweening.
-
Be sure to follow @OSUblake on CodePen too as he's the Canvas Man. https://codepen.io/osublake/ When you get stuck just whisper 'canvas canvas canvas' in your thread and he sometimes magically appears.
- 16 replies
-
- 3
-
-
-
- css animation
- infinite
- (and 2 more)
-
Thanks for the demo, but that is still a whole lot of code to look through. I'm actually not sure what the question is either. You mentioned things don't go smoothly. Do you mean they stutter or don't animate at the correct time? I'm just not clear on the nature of the problem. One thing I do see is a bunch of CSS transitions on elements. Are you perhaps creating a conflict between GSAP and CSS animations? That can definitely lead to things not running smoothly as there would be a fight for control. If you could trim that demo down to just a few elements to isolate the issue, I'm certain we can point you in the right direction. Happy tweening.
-
IE Edge 41 perspective and transform image clipping issue
PointC replied to RolandSoos's topic in GSAP
hmmm.... I'm not sure then. It's not related to GSAP, but it does seem something that's specific to Edge. @Jonathan is the all-knowing Oracle of CSS solutions. If he's around, maybe he'll jump into the thread with some good ideas. -
I'm wondering if you're expecting an animation on something like this? tl.to(textHolder,1,{display:'none',ease: Expo.easeIn},9); That will take 1 second on the timeline, but won't actually animate. It will just disappear at the end of the tween. Were you perhaps wanting autoAlpha there? That would fade the element and then set the visibility to hidden. I'm just guessing here, but as @Shaun Gorneau mentioned, a demo will be necessary to give you accurate answers. Happy tweening.
-
IE Edge 41 perspective and transform image clipping issue
PointC replied to RolandSoos's topic in GSAP
I see what you mean in Edge. I removed the perspective in the .outer div and it all seemed fine to me after that. Happy tweening. -
If you have multiple buttons, you'd want to loop through and create a timeline for each one. Something like this: I'm using jQuery each(), but if you aren't using jQuery, you can use the querySelectorAll() method to get all the triggers and loop through that NodeList too. Hopefully that helps. Happy tweening.
-
Hi @Mantvydas We've had several threads talking about gradients. Here are a few I think could help. Happy tweening.
- 2 replies
-
- 2
-
-
- radient gradient
- css
- (and 2 more)
-
@OSUblake is in the demo-off ?!? If that's the case, I think @Carl and I will have to be on the same team and Blake must wear a blindfold while coding.
-
The docs do state that stagger returns an array of TweenMax instances, but I'd agree that an extra note about needing a timeline for control would probably be a good addition to the docs. I have seen this question asked a few times in the forum so it can be confusing.
-
GreenShock /ɡrēn ˌSHäk/ noun: GreenShock psychological condition caused by prolonged exposure to the GreenSock Animation Platform, especially the use of Club GreenSock plugins. "I’m in GreenShock after witnessing Jack Doyle ‘whip up’ a new plugin and casually post it in the forum." synonyms: astonishment, surprise, stupefaction, incredulity, disbelief, speechlessness, awe, wonder, wonderment
- 39 replies
-
- 11
-
-
-
Sounds like the perfect time to start creating and returning timelines from functions. You can then easily sequence a master timeline with the add() method. Here's a recent article by Professor @Carl which should guide you through the process. https://css-tricks.com/writing-smarter-animation-code/ Happy tweening.
-
If you wanted to tween the playhead to the frown completion, you'd actually want to tween to the label after the frown because tweening to the actual 'frown' label will take you to the beginning of that morph. Which in this case would be the beginning of the timeline and showing the neutral pose. If you wanted to do this with labels, you'd probably want to move your labels to the end state of each morph. Or maybe have a 'startFrown' and 'endFrown' label so you could tween straight to a label or tween between the start and end states easily. Again though, not terribly efficient for what you're doing here. I'd recommend staying with tweening in the functions. Regarding your glitch and artifacts, I think there's something funky going on with your eye paths. I dropped in two circles to replace your eye paths (used MorphSVG to convert them to paths so your wink/blink morphs would work) and it all seems fine now. Hopefully that helps. Happy tweening.
-
"GreenSock! Raising the bar and lowering the barriers." I like that. Maybe the new tagline? Interesting stuff you've been doing with GSAP Shaun. Very creative. My own use is just standard websites so I have no cool use cases to share. In another thread Jack mentioned Tesla was a GreenSock user, but wasn't sure if that was in the cars or not. Wouldn't that be cool if GSAP was powering some of the animations in the actual vehicles?
- 10 replies
-
- 2
-
-
- stories
- case studies
- (and 1 more)
-
Slight clarification for anyone following along. I don't want to confuse anyone. On a regular tween the onCompleteAll goes after the stagger number. TweenMax.staggerFrom( targets:Array, duration:Number, vars:Object, stagger:Number, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* ) For a timeline, the onCompleteAll goes after the stagger and position: .staggerFrom( targets:Array, duration:Number, vars:Object, stagger:Number, position:*, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteScope:* ) Happy tweening.
-
Hi @Zaperela Welcome to the forum. The reason your demo wasn't (kinda sorta) working was the onComplete was in the wrong spot and being called three times. It is a bit confusing, but for stagger tweens the onCompleteAll goes after the stagger number. So what you were seeing was the infinite circle repeat timeline starting before it should have which caused an overwrite. More info in the stagger docs: https://greensock.com/docs/TweenMax/static.staggerFrom() In addition to @Shaun Gorneau's demo or moving that onComplete call on the stagger, you could also move the onComplete to the vars of the cs timeline. Lots of options. Hopefully that helps. Happy tweening and welcome aboard.
-
Hi @Mheetu Welcome to the GreenSock forum. What's happening is you're tweening to a label which isn't really the mouth pose you want. For example, you click 'frown' and then move the playhead to the 'frown' label. But that label is actually at the beginning of the timeline so you go past the frown pose and back to the neutral pose because that's what the mouth is doing at the beginning of the timeline. You could make some label changes and make this work, but in this case I'm not sure a master timeline would be the best choice. What I mean by that is what if you had 10 mouth positions and you were on position 10, but wanted to tween to position 1? You'd see all the poses as you tweened the playhead back to pose 1. See what I mean? I think just tweening in the button handling functions would be easier. Something like this: Hopefully that helps. Happy tweening and welcome aboard.
-
Yeah - the trick is just make sure your circle start point is where you want it to open. There are various ways to go about that. We have a big thread talking about circle start points that you might find helpful too. Happy tweening.
