PointC
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by PointC
-
I'm not sure I follow. Do you mean the white rectangle in my demo? If so, that can be removed (or change the color) and the mask will still be fine. The white stroke in the mask is just what will be revealed, but it doesn't have to be over white. Is that what you meant?
-
Hi @DevSaver For a dashed line and DrawSVG, you'll need to use a mask. I wrote about that here: Using variable shouldn't be any problem. You could do something like this: You may also want to take a look at our big 'circle start point' thread. Hopefully that helps. Happy tweening.
-
Hi @mbower Welcome to the GreenSock forum. Looks like you're getting some elements stuck with rapid hovering. If it were me, I'd create a timeline for each element and play/reverse on hover. That way nothing can get stuck in the 'back' position. Something like this: You'll also see that I added a .trigger class around each of your rotating containers. I did that because each of the rotating containers was the trigger and if you moved the mouse during the rotation, it would sometimes no longer be over the element and trigger the reverse. By adding a trigger div that isn't part of the actual rotation, the mouse is always over the target element throughout the rotation even if you move it a bit. I don't know if that's what you'll want to do in your final project, but it's just an idea. Hopefully that helps. Happy tweening.
-
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.
