Scale svg to 100% width & heigth of the window

[KevinJ]

Hi All,

 

I'm new to frontend dev. This is my first go at using gsap.

 

Here's what I'm trying to accomplish, when the submit button is clicked, it scales up (filling the page and hiding the original page content) revealing a short thank you/ confirmation message. On closing the message, the button scales back down reveal original page content.

 

I'm currently using part of the svg btn, and when it scales up the cursor is still a pointer, my inital thought was to change the cursor to default but I'm open to any and all suggestions.

 

Regards,

KJ

 

 

See the Pen yOPORE by kjames (@kjames) on CodePen

[Jonathan]

Hello KevinJ, and Welcome to the GreenSock Forum!

 

Try this:

 

See the Pen WwdRpz by jonathan (@jonathan) on CodePen

 

What you can do is just add a "active" class to the #ylw-btn svg (button). And then remove the class when the #close-btn button is clicked.

 

Since you are using jQuery you can take advantage of jQuery addClass() and removeClass() methods.

 

The CSS i changed / added:

#ylw-btn{
    cursor: pointer;
}

#ylw-btn.active {
    cursor: default;
}

The JS i added:

$('#ylw-btn').on('click',function(){
    $(this).addClass('active'); // add 'active' class when #ylw-btn is clicked 
    tl.play();
});

$('#close-btn').on('click',function(){
    $('#ylw-btn').removeClass('active'); // remove 'active' class when #close-btn is clicked 
    tl.reverse();
});

Hope this helps!

[KevinJ]

Hi Jonathon,

 

Thanks for the reply. This solves one issue.

 

Any thoughts on scaling the #btn-box? I'm currently setting specific a width and height for the box (this causes scrolls bars to appear) but would like it too match the viewport's width and height (I assume this will prevent the scroll bars from showing up).

 

KJ

[Jonathan]

Try this Kevinj:

 

See the Pen xVpMGp by jonathan (@jonathan) on CodePen

 

I just changed your specific width and height to use "100vw" for width, and "100vh" for height. GSAP can also animate CSS viewport units.

 

So change this:

.to(ylwbtn, 0.1, {width:3000, height: 13000, ransformOrigin:"50% 50%"})

To this:

.to(ylwbtn, 0.1, {width:'100vw', height: '100vh', autoRound: false, transformOrigin:"50% 50%"})

You will notice i added autoRound, since you are trying to animate width and height. autoRound will allow sub-pixel interpolation by the browser. autoRound is part of the GSAP CSSPlugin.

• autoRound
  By default, CSSPlugin will round pixel values and zIndex to the closest integer during the tween (the inbetween values) because it improves browser performance, but if you'd rather disable that behavior, pass autoRound:false in the css object. You can still use the RoundPropsPlugin to manually define properties that you want rounded.
  If you need to animate numeric attributes (rather than css-related properties), you can use the AttrPlugin. And to replace the text in a DOM element, use the TextPlugin.

And i also changed opacity for #btn-txt and .thankyou to use autoAlpha instead for a performance. autoAlpha is also part of the GSAP CSSPlugin.

• autoAlpha
  Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.
  
  Usage Example:
  

  //fade out and set visibility:hidden
  TweenLite.to(element, 2, {autoAlpha:0});
  
  //in 2 seconds, fade back in with visibility:visible
  TweenLite.to(element, 2, {autoAlpha:1, delay:2});
  

If you go to the GSAP CSSPlugin Doc's page you can scroll down and read up on autoRound and autoAlpha.

 

I also added a height:100% to your html, body and #ylw-btn selectors in your CSS. This way #ylw-btn can inherit the height from its parents the body and html tags. I also added CSS position:relative to your #ylw-btn since anytime you animate any element you want either position relative or absolute. And i added overflow:hidden to your body tag so you dont see scroll bars. But you were seeing scroll bars due to the specific width and height,

html,
body {
  height: 100%; /* make html and body tag 100% height, since default height is auto */
}

body {
  overflow:hidden; /* hide scroll bars */
}

#ylw-btn{
  position:relative; /* since you will be animating the button, helps with animating */
  cursor: pointer;
  height: 100%; /* give the button height 100% so it inherits from html and body tag */
}

Resources:

CSSPlugin Docs: GSAP CSSPlugin

 

Happy Tweening

[KevinJ]

Hi Jonathon,

 

The button doesn't scale vertically.

 

In neither your or my pen with your edits. Any idea?

 

KJ

[Jonathan]

Hello again KevinJ,

 

It looks like you were missing the preserveAspectRatio attribute with a value of none on your main <svg> tag.

 

See the Pen xVpMGp?editors=1000 by jonathan (@jonathan) on CodePen

 

So you had this without the preserveAspectRatio attribute

<svg id="ylw-btn" xmlns="http://www.w3.org/2000/svg" width="150" height="45" viewBox="0 0 150 45">

It should be the below, so your SVG can scale without aspect ratio, so add preserveAspectRatio="none"

<svg id="ylw-btn" xmlns="http://www.w3.org/2000/svg" width="150" height="45" preserveAspectRatio="none" viewBox="0 0 150 45">

Resources:

MDN SVG preserveAspectRatio attribute: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

 

Happy Tweening!

[KevinJ]

While my initial question has been answered, I ran into a little hiccup when implementing this, when the button is in a div that has been positioned a parent div, the button only grows from the 0, 0 of that div.

 

I've changed the pen show what I mean.

See the Pen oxEvGQ by kjames (@kjames) on CodePen

 

Thoughts on this?

KJ

[Jonathan]

You can try this ..

 

See the Pen wGjNqR by jonathan (@jonathan) on CodePen

 

[KevinJ]

Hi Jonathon,

 

One of my coworkers suggested doing this, but I would really like to have it scale from its current position.

 

KJ 

[Jonathan]

Do you mean scale like you previously had it in

See the Pen oxEvGQ by kjames (@kjames) on CodePen

?

 

Or do you mean scale out from that position, so it fills the entire viewport? if so that would be a little tricky, and you would have to play with CSS transform-origin (transformOrigin). And maybe you might have to change some css and markup?

[KevinJ]

scale out from that position. I'm ok with changing the mark up and css.

 

KJ

[Jonathan]

try this

 

See the Pen eZKOgm by jonathan (@jonathan) on CodePen

[KevinJ]

Hi Jonathan,

 

Thanks. We've been using this with the idea that button wil always be in the same place on the page.

 

This doesn't work if the layout becomes fluid/responsive. A co-worker suggested getting the position of the ylw-btn via javascript and using that.

 

I will continue playing. Any thoughts? 

 

KJ

[Jonathan]

It can work if the layout becomes fluid or responsive! You just have to create a function that re-positions the button based on the viewport so when it is resized it will position itself accordingly.

The scale effect will work regardless of its position when scaled out. But that is up to you to create that logic to position the button based on the viewport. Then you animate out the element to the viewport:

 .to(ylwbtn, 0.2, {
      width: '100vw',
      height: '100vh',
      x: 0,
      y: 0,
      autoRound: false,
      transformOrigin: "50% 50%"
 })

You can look into using xPercent and yPercent which is part of the CSSPlugin. View the below link for how to do responsive animations with GSAP xPercent and yPercent.

https://greensock.com/gsap-1-13-1

I would recommend that you read the CSSPlugin Docs

https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

[OSUblake]

I posted something that might help you out...

http://greensock.com/forums/topic/14206-full-screen-a-div/?p=60466

[KevinJ]

Thanks Blake.

 

I'm pretty new to JS and will look into combining what I did with what you did.

 

KJ