Jump to content
GreenSock

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

Search the Community

Showing results for tags 'css'.

  • 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

  1. Hey all, Long time Greensock user (since as2, love you guys! edit: lol, according to my profile since 1901) but this time i need a little help. Im basically looking for a internal Greensock function (or one that's external and does what i need) but i cant find it in code or docs. Let me hash out a bit, im working on a little framework for a '1Pager' site (you know, those silly sites that let you just scroll for more stuff as the entire thing animates all over the place) and im in need of a function that can take two css styles, a start and end, and then pick a point between them.
  2. I'm creating a relatively complex nav layout for a single-page scrolling site using GSAP and ScrollMagic. The "upcoming" page in the navigation tweens upward as you scroll down until it hits the top of the nav, and then a page transition is triggered (which is unrelated to this issue). I've included a stripped-down Codepen with only the Nav - please view it in Full View using Chrome or Firefox to see the effect working properly. The value it's tweening to achieve that effect is relatively complicated - it's top: calc(-100vh + [nav container height] + [2x nav bottom property]) which has the
  3. Hi there, I'm wondering if is possible to load an animation with different width and a small delay each time the width gets bigger. For example: This is the original code: The css for the <div cortana_blurb> is set to width: 0; MU.showBlurb = function(){ TweenMax.to(cortana_blurb, .15, {width: 34, ease:Linear.easeNone}), .4; TweenMax.to(cortana_blurb, .15, {width:64, ease:Linear.easeNone, delay:.4 }); TweenMax.to(cortana_blurb, .15, {width:111, ease:Linear.easeNone, delay:.8 }); TweenMax.to(cortana_blurb, .15, {width:144, ease:Linear.easeNone, delay:1.2 }); TweenMax.
  4. Here is another question How come that I can tween CSS properties directly without using the CSSPlugin. The below works. var $frame1 = document.getElementById('frame1') tl.add( TweenLite.to($frame1, 3, {backgroundColor:"#ff6a6a"}) ); tl.play() Am I missing something obvious here? If so, when should the CSS plugin be used since the above works in any case? Thanks in advance .S
  5. valiz22

    Rotating Words

    Hello, I am trying to reproduce the banner section from this website: https://www.triprebel.com/. In the codepen file (http://codepen.io/valiz22/pen/rerwxL) I have what I succeeded so far. Could anybody help me? Thank you!
  6. Hi I create TlimeLineMax image gallery animation. refer below code. "tl.add(TweenLite.to(img1, 1, {delay:1, css: { 'filter': 'grayscale(0%)','-webkit-filter': 'grayscale(0%)' },ease:Linear.easeNone}));" animation was work perfectly. but grayscale is too fast. how can i slow this grayscale aniamtion. Thank you.
  7. Is there a way to use GSAP TweenMax for basic CSS transforms on a movie clip instance in Adobe Animate when you are publishing to Canvas? For example: this.p1thumb.addEventListener("click", myFunctionp1.bind(this)); function myFunctionp1() { TweenMax.to(this.box, .25, { boxShadow:"0px 0px 10px 10px rgb(0, 204, 0)" }); } It does not seem to work. I'm also interested in how you might change stroke widths, colors, etc. dynamically. Any ideas?
  8. I am not sure if here is the best place to ask such question. But I have very little clue where to start with this and would appreciate if someone could point me to the right place. And not sure what's the best search term for this. I am trying to re-create such typography effect. If you look at "Organic", it changes fill color and spacing as the user scroll down the page. The fill color is filling half way in the text.https://dribbble.com/shots/2623261-Landing-Page-Animation Can GSAP alone achieve this? Or do I need to combine it with CSS? or SVG? What is the best technology for
  9. Hi, i am having an issue that i just cant solve. The demo Codepen illustrates the problem best. I would really appreciate if someone could help me. Basically, I have a <div> with position: fixed property. Inside this <div> i have an image that is cloned when it is dragged. The problem i have is that i don't want the clone to have position: fixed. Thanks.
  10. Onizuki

    Image brightness

    Hello how could I control (animate) the brightness of an image through GS? something like filter: brightness(2) fadein on hover. thanks
  11. Hi all. Quick question. I'd like to tween the kerning/letter spacing on a line of text. Got it working but have a couple specific inquiries. I wasn't able to locate the exact documentation for the letterspacing tween effect. My line of code is: TweenMax.fromTo("#text1", 1, {letterSpacing:20, alpha:0}, {letterSpacing:10, alpha:1}); I'd like to add a delay and also I want the text to tween from the center rather than from the left - how do I do that as well? Here is the CSS: #text1 { font-family: 'Anderson 1938', 'anderson_1938regular', 'Helvetica', sans-serif; font-size:28px;
  12. Hi, I'm trying to figure out how to make sure an element does not go below a certain pixel width either on browser resize or due to the animation. What I'm hoping for is at the end of the timeline, when the "logo" is up in the top left-hand corner, it doesn't go beneath, say, 200pixels wide. I have entered this through jQuery as such $('#logo').css({ 'min-width':'200px' }); And when I check through dev tools, I see it there as an inline element, but it is not effecting the width when I resize or check on a small browser. Any guidance would be appreciated!
  13. Hey guys! I am working up a new animated banner for my boss's site. I have 4 banners. Each one animated in to view and animated out of view. I just finished all their animations. I commented out the js and html for each individual banner while I worked on the animation. They are strung together as once leangthy animation due to my lack of knowledge with JS and Gsap but think it should work okay. However when I removed all my commented out JS and HTML to string all the animations together to play in "sequence" Every animation except the first example will lag into place and not show the whole
  14. Here is a fun idea: use GSAP to generate CSS Code. It would be a nice plugin to write a GSAP animation and have it output a CSS animation in N frames. I imagine it would be something like what Bounce.js does (https://medium.com/tictail/bounce-js-smarter-keyframes-ffa13a501ea7#.9tdmhd7z3). There are some environments that due to setup or legal issues it wouldn't allow to add a 3rd party library, but still you need to use the same timing/animation effects you used elsewhere. A plugin that allows you to export your animation to CSS animation will certainly help a lot.
  15. I've made a small animation test, trying to mimic this simple effect My code is available here and this is a screen-capture recording the results. 4 browsers from left to right: IE11 - a complete mess, not web worthy... then Microsoft Edge 13 - notice a round circle is a bit too much to ask... I used border-radius. Then comes the mighty Google chrome - notice how the animation elements are pixelated during the animation to achieve "performance"... and last is Firefox which is the only browser that delivered a sharp result although the movement was a bit jumpy lacking smoothness and elegance.
  16. Hello.. i am trying to clear properties on a tween and/or timeline. But no matter what or where i use it, it wont clear the properties off the element (image). sample code below: var tl = new TimelineMax({ paused:true, autoRemoveChildren:true, onComplete: function(){ //TweenMax($("img"),{clearProps:"all"}); TweenMax($("img"),{clearProps:"transformOrigin,transform,scale"}); } }); tl.add( TweenMax.to($("img"), 4, { css:{ transformOrigin:"left top", scale:1.5 }, clearProps: "transformOri
  17. If anyone has any insight here, a MILLION thanks in advance. There is probably a simple way to to this, but I've been struggling to figure this out for days and I'm literally about to lose my mind. I am dragging a placeholder item (GSAP Draggable) from a sidebar and dropping it onto a pannable/zoomable "stage" which uses CSS transforms (jquery.panzoom). When dropped, the draggable element is removed and should be replaced by a new element with absolute positioning inside the panned/zoomed "stage" in the exact same position, visually speaking, regardless of how the stage has been panned
  18. I have used GSAP for a few years now, after being introduced to it through college. I am a big fan and want to use it for animating a sequence in my portfolio site. I am testing a simple concept to see if I can make a much more complex sequence What I am trying to do is change an image at a specific point in the Timeline sequence - essentially changing the "src" path of the image. I have spent an hour or two now scouring the forums and searching online for a solution, and the only seemingly related issues are much more complex. I am aware of the possibility of using jQuery and the "at
  19. Hi one and all - I have a small test that has produced nothing on my site but I just loaded it to Codepen (from "Morphing Countdown" by Chris Gannon) and I get nearly what I was after Is there something else I need to load apart from MorphSVG & TweenMax? Perhaps I should load these some other way? Internet Explorer is showing "Cannot load a null target" TweenMax.min.js (16,27469). I have it loaded on my site at: www.ezpc.eu/anitalouise.html Thanks to anyone who has time to look at this - Trev
  20. Hi guys, Coming back to this forum for some simple trouble ! I have a flexbox layout, which tweens in many ways, and through many efforts GSAP and flexbox work (almost) perfectly together ! Everything works fine in latest Chrome, Firefox and IE (well, some minor border-radius tweening trouble in IE, but... meh). The troublemakers are Safari / Safari iOS / Chrome iOS and buddies, which still need vendor prefixes for flexboxes. As pointed out in this topic, we can set() prefixes in CSS PROPERTIES this way : tl.set($('#myDiv'), {css:{"-webkit-flex":0}}); But how about setting
  21. Hi there. This seems rather simple but actually might not be as a simple of a solution as I was hoping for. I'm trying to transform the height of a div: #mountain { position: absolute; top: 175px; left: 18px; width:123px; height:46px; background-image:url(mountain.png); } Using this GSAP TweenMax.from('#mountain', .5, {height:0, transformOrigin:"bottom"}); On <div id="mountain"></div> However it does transforms the height, it scales the div from the top down regardless of the transformOrigin setting. What am I missing? I suspect transformOrigin does not cover height? Ca
  22. I've been using clip property to create rectangular masks. TweenMax.to(element, 0.5, { // rect(top, right, bottom, left) clip:"rect(0px,150px,150px,0px)" }); I've read that the css clip property is deprecated. Will GSAP be able to poly-fill the clip property to make it compatible with browsers that have dropped support for clip?
  23. mib32

    CPU Usage

    Hello! I use GSAP to make infinite animation in the header of http://okcity.pro with TweenLite window.cloudsTween = TweenLite.to(clouds, 100, {'background-position-x': "-1739px", ease: Power0.easeNone, onComplete: window.animateClouds}) But i get 50% cpu usage when i view that page. It is better than with CSS animation and jquery, but still is a lot. Could you suggest a method to speed this infinite animation up?
  24. ..I would expect it would return the new value and not the pretween value. Please reffer to the codepen example. I am either missing something vey simple or very complex and surely nothing in beTween. Thanks lads
  25. So on this website, I use Timeline to set up and intro animation on the home page. When I host it, I'll set a cookie script so it'll only happen the first time you hit the home page, but for now, it's part of the problem. I have CSS statements and media queries interacting with my script and it just occurred to me that I have queries in my script for the different values and dimensions of the animations based on screen size. It's hard to explain, but as I'm new to GSAP, I cannot think for the life of me how to make them now conflict. I've attached the files needed. Any help would be greatly ap
×