kathryn.crawford
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by kathryn.crawford
-
@Dipscom I'll give that a shot and see if it works. @jonathan, I am trying to make sure only one of the "hidden" divs (lines 54 and 80) within the "wrapper" div (line 52) are visible. I want the user to be able to click on the appropriate nav item, and when that happens, any other visible "hidden" div should be set to autoAlpha: 0, and the div corresponding to the nav item will fade in in it's place. I hope that makes a little more sense. It's working now, somewhat, but it stops working if you try to switch back and forth between the two top nav items more than once.
-
@celli, I replaced the autoAlpha: 0 tween with clearprops, but I'm still having the same issue. It only works 1 time per nav item.
-
I'm trying to do an autoalpha switch with a navigation. To prevent the page from getting too crowded, I'm tweening autoalpha for the appropriate content when the nav element is clicked. I've created a loop to create the timelines and listeners, and then calling the timelines on the appropriate "titles" click. Right now, the tween works if you click the titles once each, but if you try to switch back and forth, the timelines are no longer tweening.
-
Calling timeline function in the middle of another timeline
kathryn.crawford replied to kathryn.crawford's topic in GSAP
@jonathan, haha woops! I posted the link before I finished editing the pen. I did put flicker there, but sadly, it doesn't work still. http://codepen.io/kathryncrawford/pen/YyoyLz -
I'm trying to get my flicker animation to start after the opacity part of the tl tween. Problem is I can't just append it to the end, because I've got more tl tweens running while the flicker animation is happening. As you can see in the tween, it doesn't look like my function is firing at all. Any ideas? Codepen updated: http://codepen.io/kathryncrawford/pen/YyoyLz
-
Ah, I see what you did there. Thanks!
-
Related question. If you set a rough ease to repeat, will it randomize each time? If not is there any way to do so? A loop perhaps?
-
D'oh!
-
I'm trying to create a flicker effect (eventually intended for some christmas light images) that will flicker the light off and on on repeat, and with a yoyo effect so there isn't a jump between opacity:1 and opacity:0 when the tween repeats. Right now, nothing is happening in my codepen and I'm not really sure where I went wrong!
-
Realized it was the css property "text-align: center" messing me up.
-
I'm trying to tween these images so that they stack on top of one another, at x:0, y:0. The matrix looks right, but they are only moving halfway to the left. No idea why!
-
Thanks PointC, that should work great
-
@Diaco, I added a codepen demo
-
I've been building a website with Bootstrap3, and I decided I wanted to tween some divs to break up one of the pages. I tried the following to tween the display of the divs, but nothing seems to work. I also tried using .invisible (see below) and tweening visibility, but that did not work either. Bootstrap classes .hidden { display: none !important; } .invisible { visibility: hidden; }
-
Transform position of SVG text by adding
kathryn.crawford replied to kathryn.crawford's topic in GSAP
@Ohem, I didn't dare to hope it'd be that simple. Thanks so much!- 3 replies
-
- 2
-
-
- svg
- attrplugin
- (and 1 more)
-
You can see at line 26 in my JS that I am animating the svg text for whichever circle is hovered over. My only problem is this. Each circle is at different positions, so I need the text to animate by adding a certain number of px to it's current position. Something similar to a varible addition (x += 10;). Is this possible to do?
-
Thanks Jonathan! Looks like I need to review positioning.
-
I've got an overlay that I have moved to the back of my page, so that it doesn't block my hover animation on the 2 circles. #open { visibility: hidden; z-index: 1; } When I open the overlay, I need it moved to the top, so that it will cover the circles, and also block their animation. My set doesn't seem to have any effect though. tl2.set('#open', {zIndex:5}) .to("#closed", 1, {morphSVG:{shape:"#open"}}) I've tried moving the set around the tl as well. It doesn't seem to work no matter where in the timeline I put it. I figure I probably want it at the beginning though, so that the morphSVG animation covers up the circles immediately.
-
Create corner opening overlay with MorphSVG
kathryn.crawford replied to kathryn.crawford's topic in GSAP
Oh gosh. I feel so silly. I did the same thing on the other one! -
Create corner opening overlay with MorphSVG
kathryn.crawford replied to kathryn.crawford's topic in GSAP
Ok, now I have a different problem. I'm adding this code to another codepen, and while it worked fine on the original one (morphSVG tweened the visibility to visible while morphing), this one is not changing the visibility. http://codepen.io/kathryncrawford/pen/JYBRVR All the overlay code is at the bottom. FYI I have to do visibility and not opacity, because otherwise my hover effects won't work, but regardless, I had no success with opacity either. -
Create corner opening overlay with MorphSVG
kathryn.crawford replied to kathryn.crawford's topic in GSAP
@Carl, that actually helped another problem I had. I needed to have the visibility for the paths set to "hidden" and then tween it to visible, so I ended up using .set instead of .to! I also added some fill -
Create corner opening overlay with MorphSVG
kathryn.crawford replied to kathryn.crawford's topic in GSAP
Thanks Diaco, paths are so confusing... -
I'm trying to recreate this demo in GSAP. http://tympanus.net/Development/FullscreenOverlayStyles/index9.html My codepen isn't working at all, and I'm not sure why. And yeah, I know it might be the "closed" shape, because it's 0px wide everywhere (so maybe non-existant?). I've tried it with <path id="closed" d='M500 100 L600 600 L600 0 L0 0 Z' />, and that didn't work either not sure what's up here. Maybe visibility issues?
-
Got it working with an image! Thanks so much for you guys' help!
-
So basically I just moved the other circle behind the event handler one and it worked fine. Sometimes, programming makes me crazy. Thanks for the help! I knew it must be something obvious going on.
