Jump to content
GreenSock

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

Search the Community

Showing results for tags 'viewport'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 13 results

  1. Hello and first off congrats on the the release of ScrollTrigger, it's definitely a game changer! Are there any plans for adding stagger in ScrollTrigger? Would be really useful for reveals on a grid, where you'd want to stagger the reveal of each element when entering the viewport.
  2. Hi, I'm trying to add animation on hover in my button. The animation work but I'd some issue in the element after the page scroll as you can see in this example https://codepen.io/MG_Dev/pen/VwYawbe How can apply the animation to all page elements? Thank you!
  3. I need to make working this functionality, basically I need to trigger the GSAP function when the element is in viewport. I'm adding the class and is going all fine, but then I need the function to work on the elements and animate them. I don't intend to use Scrollmagic
  4. Hi there, I had a thought that it would be cool for a banner to only start playing when the ad comes into the users viewport. So that if the ad isn't in the users view it doesn't play while they're not watching, if the ad is positioned further down a page for example. What's the best way to achieve this and is this something that is permitted to do on Google DoubleClick or Google Display Network? Thanks.
  5. Hi I have some odd behaviour when translating a div that is 100% of the viewport width and height when I translate it in an out of the viewport itself. The example is a simplified example of what's going to be a slide-in menu sitting off the viewport using translateX: -100% in my CSS. When I animate it in and out, it works OK using xPercent. But when I resize the window it doesn't work. I tried using vw units with the normal x: property but this created other problems. How do I get the behaviour that happens when the code first loads, to work after the window is resized? When I use scaleX on the element I don't encounter the issue (for obvious reasons I guess), but sadly I do need to translate the element in this instance because it will contain text. Any help would be fab var button = document.getElementById("button"); var menuClicked = false; var menuAnimation = new TimelineMax(); function menuIn() { if(menuClicked === false) { menuAnimation .to("#main-nav", .75, {xPercent: 100}); menuClicked = true; } else { menuAnimation .to("#main-nav", .75, {xPercent: -100}); menuClicked = false; } } button.addEventListener("click", menuIn, false)
  6. Are there any posts or howtos on animating an element when it enters the viewport? So, scrolling the page, it enters the viewport and then animates. I’ll figure out an animation but would like to know how to have an element only animate when it enters the viewport on scroll.
  7. Hi, The library is great. Loves to use it to create animations. I was using it will scrollMagic library. I wanted to know if there is any way I can detect if the animated element is scrolled out of the browser viewport when the user scrolls the page up so that the animation can be reset. Right now when it is scrolled down the animation is playing in the reverse direction. I just want the animated element stays in its final state as long as it is in the screen and when the user scrolls up and the element goes out of the viewport I want to reset it so it can play again when it is scrolled down. just like the title animation in http://carv.ai
  8. I am using draggable script with throwprops...I have a menu button at the bottom of the page inside fixed div...and my button position absolute...I want to throw my button to center of viewport. How can I do that? thanks..
  9. Hi there. I have just started using GSAP and want to animate the viewport attribute of the SVG inside a Object tag. This is the code I have but doesn't seem to work. var tl = new TimelineMax({delay:.5}), svgDoc = document.getElementById("SVGobject").contentDocument; TweenMax.set(svgDoc,{attr:{viewBox:"250 0 250 250"}}); tl.to(svgDoc, 1.5, {attr:{ viewBox:"0 0 1000 1000"}}); Once i have this working the ultimate aim is to trigger an animation of the viewport via an onClick event. Currently I just change the viewport via an array, so any help on this bit too would be very much appreciated. var interactions = { 'Button1' : '414 0 414 736', 'Button2' : '214 0 414 736', 'Button3' : '0 0 414 736', 'Button4' : '828 0 414 736', };
  10. I've been at this for a few days now (starting with Skrollr and now ScrollMagic), and I just can't figure it out: If I create an SVG animation - it completes 100% on my laptop screen. If I view the animation on a larger screen (with more viewport height), the animation doesn't complete (unless I allow the viewport to go beyond the footer, creating blank space). My question is this: how should I use ScrollMagic trigger points in a responsive design where the height of the viewport changes? I initially thought that I could trigger them on the percentage that the actual scrollbar has been scrolled - thus keeping everything in proportion (ie, fire SVG line when the scrollbar has been scrolled 50%), but it seems like this is not the case. If anyone could provide clarification on this, I would REALLY appreciate it! ps, I can create a CodePen if needed - though this is quite a general question that will be applied to animations throughout the site.
  11. I have got this snippet of gsap code working pretty well to adapt my 1280x768 webgame to almost any mobile viewport size. It's not perfect, but I think it's pretty close. I'm looking for any constructive advice or ways to improve this method as adapting viewport sizes is kind of a pain. // disable all mobile dragging of webpage $("html").on("touchmove", function(e){ // only disable dragging of html element if(e.target===this){ e.preventDefault(); } }); // make html page scaling originate from top-left corner TweenMax.set("html", { transformOrigin:"0 0" }); function resizeWindow(){ var w=window.innerWidth; var h=window.innerHeight; // width less than 1280? if(w<1280){ TweenMax.set("html",{scaleX:w/1280}); }else{ TweenMax.set("html",{scaleX:1}); } // height less than 768? if(h<768){ TweenMax.set("html",{scaleY:h/768}); }else{ TweenMax.set("html",{scaleY:1}); } } $(window).on("resize", function(){ // only do this for mobile devices if(isMobile===true){ // do not resize if focusing on an input or the keyboard will squish the whole webpage if(inputFocus===false){ resizeWindow(); } } });
  12. Hello there, As a new user of your fabulous library, I'm experimenting and I just went into a big issue. On my computer, all is displaying fine but on my iPad and mobile, I've an issue. I'm trying to animate my logo making images coming from the sides to the center of the screen. If on computer the effect is just as I designed it, on the tablet and the mobile phone, the browser resize (scale down) to fit to the new width of the page according to the position of the image on the left (not on the right side). Do i have a way to force browser to keep the page width and not scale down to fit in the logo? Here's a link to the animation: http://francoish.net/test/ Kind regards.
  13. Hello everybody, so far I am loving this plugin it is a great tool and this site is a great resource and I appreciate all the work that has been done in delivering such a great tool. I have a timeline that I created. The timline is not really that important. Just in case though: var tweenArticle = new TimelineMax() .from($('header.food_header > hgroup'), 3, {opacity:0, top:'-40px', ease: Power4.easeOut},0) .from($('article.food > section > summary > p'), 3, {opacity:0, top:'40px', ease: Power4.easeOut},0); This is the site I am trying to put it on: http://webshowcase.tk/wp1/?page_id=114 This is a wordpress site and what I am trying to do is affect every post on the page. When The article is in the viewport I would like to start animating just the elements in that article and if possible reverse but reverse is not super important at the moment. I can't seem to figure out how to get my timeline to play when the article is in the viewport. Any help would be greatly appreciated. Thank you.
×