Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

3 Newbie

About chris_r

  • Rank
  1. chris_r

    SVG Mask Problem

    That worked perfectly. Thanks for the tip on nested SVGs, killed that too. Should have posted here sooner - I was killing a lot of time on this issue last night. Cheers.
  2. chris_r

    SVG Mask Problem

    Warning: mask newbie here. I'm applying a mask in an SVG per the link below but it's not working. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask The way I read it, white reveals, black hides (filled rects inside the mask def). I'm applying the mask to a group (the husky head). The mask should be the same area as the rounded rectangle visible behind the dog head. So theoretically the dog head should be masked to just inside the rounded rectangle. Any insight appreciated... UPDATE: I fixed the issue per Craig's advice, so Codepen now shows a properly functioning mask.
  3. Thanks Carl and OSUblake.
  4. Thanks for the hint on .pause, it was that and the fact I was using .add, which I thought was the equivalent of .append in the old as3 version.
  5. I'm new to using GSAP in javascript. In AS3 I would create a timeline in a function and append tweens to it like so: public function createAnimation():void { anim = new TimelineMax({onComplete:animComplete}); anim.stop(); anim.addLabel("CONTENT"); anim.append( new TweenLite( bb.s1_m, 0.20, {alpha:1, ease:Quad.easeOut} ) ); anim.append( new TweenLite( bb.s2_m, 0.20, {alpha:1, ease:Quad.easeOut} ) ); anim.append( new TweenLite( bb.s3_m, 0.20, {alpha:1, ease:Quad.easeOut} ) ); } Then play it from another function, which worked with no issues: public function startAnimation(e:Event=null):void { anim.gotoAndPlay("CONTENT"); } In Javascript I am defining a global var and creating a timeline like this: var t1 = gsap.timeline(); function createAnimation () { var time1 = 0.50; var time2 = 0.30; t1.add(".logo-button", {ease: "power2.out", duration: time1, opacity: 0.0}) t1.add(".logo", {ease: "power2.out", duration: time1, delay:0.4, opacity: 1.0}) t1.add(".husky-mono", {ease: "power2.out", duration: time1, opacity: 1.0}) } Then trying to play it like this: function playAnimation () { t1.play(); } The above approach is not working, however the function below will play the animation (meaning in general GSAP is functioning): function animateGSAP () { var time1 = 0.70; var time2 = 0.70; gsap.to(".logo-button", {ease: "power2.out", duration: time1, delay:0.0, opacity: 0.0}); gsap.to(".logo", {ease: "power2.out", duration: time1, delay:0.4, opacity: 1.0}); gsap.to(".husky-mono", {ease: "power2.out", duration: time1, delay:1.0, opacity: 1.0}); } How can I create a timeline in a function in Javascript and control it with another function? Thanks for any help!