Search the Community

Showing results for tags 'html'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 45 results

  1. GordonFreeman

    Webpack bundling Issue

    Well I have this bundling process: Starting with coffeescript files being transpiled to their counterpart js files in single directory. So for all those JS files I can include and use them then with: require "./moduleX.js" Then bundle them with webpack to a single bundle.js And then I use pug to include the bundle.js into the single HTML file. The Problem: When using import TweenMax from "gsap/TweenMax" weird strings appear in the HTML outside of script tags and render the whole HTML useless. Such strings are: "\n\t\t\t *\n\t\t\t * @param {!string} ns The namespace of the class definition, leaving off \"com.greensock.\" as that's assumed. For example, \"TweenLite\" or \"plugins.CSSPlugin\" or \"easing.Back\".\n\t\t\t * @param {!Array. <string>} dependencies An array of dependencies (described as their namespaces minus \"com.greensock.\" prefix). For example [\"TweenLite\",\"plugins.TweenPlugin\",\"core.Animation\"]\n\t\t\t * @param {!function():Object} func The function that should be called and passed the resolved dependencies which will return the actual class for this definition.\n\t\t\t * @param {boolean=} global If true, the class will be added to the global scope (typically window unless you define a window.GreenSockGlobals object)\n\t\t\t */\n\t\t\tDefinition = function(ns, dependencies, func, global) {\n\t\t\t\ = (_defLookup[ns]) ? _defLookup[ns].sc : []; //subclasses\n\t\t\t\t_defLookup[ns] = this;\n\t\t\t\tthis.gsClass = null;\n\t\t\t\tthis.func = func;\n\t\t\t\tvar _classes = [];\n\t\t\t\tthis.check = function(init) {\n\t\t\t\t\tvar i = dependencies.length,\n\t\t\t\t\t\tmissing = i,\n\t\t\t\t\t\tcur, a, n, cl;\n\t\t\t\t\twhile (--i > -1) {\n\t\t\t\t\t\tif ((cur = _defLookup[dependencies[i]] || new Definition(dependencies[i], [])).gsClass) {\n\t\t\t\t\t\t\t_classes[i] = cur.gsClass;\n\t\t\t\t\t\t\tmissing--;\n\t\t\t\t\t\t} else if (init) {\n\t\t\t\t\t\t\;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tif (missing === 0 && func) {\n\t\t\t\t\t\ta = (\"com.greensock.\" + ns).split(\".\");\n\t\t\t\t\t\tn = a.pop();\n\t\t\t\t\t\tcl = _namespace(a.join(\".\"))[n] = this.gsClass = func.apply(func, _classes);\n\n\t\t\t\t\t\t//exports to multiple environments\n\t\t\t\t\t\tif (global) {\n\t\t\t\t\t\t\t_globals[n] = _exports[n] = cl; //provides a way to avoid global namespace pollution. By default, the main classes like TweenLite, Power1, Strong, etc. are added to window unless a GreenSockGlobals is defined. So if you want to have things added to a custom object instead, just do something like window.GreenSockGlobals = {} before loading any GreenSock files. You can even set up an alias like window.GreenSockGlobals = = {} so that you can access everything like gs.TweenLite. Also remember that ALL classes are added to the object (in their respective packages, like com.greensock.easing.Power1, com.greensock.TweenLite, etc.)\n\t\t\t\t\t\t\tif (typeof(module) !== \"undefined\" && module.exports) { //node\n\t\t\t\t\t\t\t\tif (ns === moduleName) {\n\t\t\t\t\t\t\t\t\tmodule.exports = _exports[moduleName] = cl;\n\t\t\t\t\t\t\t\t\t ... I did not manage yet to stop webpack from using eval. Which could be part of the problem. I do have a workaround where I don't use npm, just adding the TweenMax.min.js to the same directory as the other js files and use TweenMax = require "./TweenMax.min.js" The problem is when using the MorphSVGPlugin it requires the module TweenLite as npm module. ERROR in ./compiled/js/plugins/MorphSVGPlugin.min.js Module not found: Error: Can't resolve 'TweenLite' in './compiled/js/plugins' So has anyone an idea on the issue with the thought build process? Or does anybody have an idea how I can get the workaround to also work for the MorphSVGPlugin? Help would be very appreciated
  2. Stagnax

    Invoking function on scrolling

    Hi, I was looking for animation on scrolling and i came across this So I played with it a little. I used scrollmagic to pin the layout during the duratoin of the box animation. So now i want to create similar animation timelines, with few changes. How do i put an individual timeline into a function and call it on scroll. Ive tried this syntax, but it doesnt seem to work : jQuery('.Screen').each(function () { var currentScreen = this; new ScrollMagic.Scene({ triggerElement: currentScreen, duration: 2000, offset: iScreenSize_H }) .on('start', function () { console.log(this.triggerElement().id); }).addTo(controller); }); Thank you .
  3. GreenHorny

    How Can I Achieve This Slide Effect?

    Hi, Anybody can help me achieve the slider effect this firm is using? I am new to using greensock. Thank you in advance! GH
  4. Stagnax

    Smooth Repeat Vertical motion

    Hi, How do I animate this ball up and down smoothly. I'm using fromTo but i don't know where to put "repeat:-1"
  5. Hello I am able to scroll the div from right to left side but I have to display the div linearly when scrolling the mouse wheel.The current code is not displayed liner. I mean I have to display smoothly from right to left. TIll now I haven't used GSAP. Would you help me out in this?
  6. timdt

    Animate SVG <g> group

    Hey guys, so i am wondering how i can animate my svg? It is only the second time i am doing this only this time it wont work. If i place in the css for instance : opacity:0; this will work. When i use .from opacity or autoAlpha:0 nothing happens. I also used transform origin in the inline style, that also works. What is wrong? Also no console errors in the browser. Would like to animate them so they look like a bar graph Thanks allot in advance
  7. Ahsan Jamal

    Screen Scaling and opacity animation

    I want to animate the home page of my website like this one : I am using GSAP TweenMax function but unable to get the smooth animation like this. I am also trying the ScrollMagic Library for it but still no luck. Please guide how can I achieve this. Thanks in advance.
  8. foxhound3311

    How to Loop Animation Before it Ends

    Hey guys, I'm trying to create an animation for a cup of coffee that has hot steam leaving it. The idea is to have 2 curved lines that constantly move up on the y-axis. The top and bottom of the paths are hidden behind a mask. My goal is to have the paths constantly move up with the illusion that it's constant. Right now you can see the path has to stop, then reset its position before moving back up. I hope this makes sense. Is this possible?
  9. emmanuelulloa

    Layout Helper

    Please check my tutorial on my Layout Helper tool to create banners faster:
  10. Can you share your methodology for HTML and CSS when working banners. You know, the non-GSAP part? I usually chop up the PSD to get my images. I name images as I will reference them on CSS, HTML and JS; so product.png will be <div id="product" class="animated"><img src="product.png" /><div> then on CSS I will have .animated { display: block; position: absolute;} #product { left: 10px; top: 35px;} Then when the layout is done I start the GSAPing from there.
  11. Hi, I was using these two scripts in my HTML5 banner ads: <script src=''></script> <script src=""></script> I had to put these two banner ads through google so as per the, I changed the above scripts to: <script src=""></script> <script type="text/javascript" src=""></script> After running the code, it throws an error saying that "TimelineMax is not defined". Can anyone please tell me what am I suppose to do to fix this? Thanks
  12. foxhound3311

    How to give SVG Element Overflow: Hidden ?

    I'm trying to have .scene1 slide off the page to the left side of my animation. My goal was to add a property of overflow:hidden to a group named .screen-wrapper. The idea is that once .scene1 slides off the screen it would not be seen beyond the white screen. Sadly this is not working. When checking out the code it seem to be taking the attribute. Is there a way to-do overflow:hidden, or am i doing it wrong? Any help would be great.
  13. This is my first GSAP animation. I'm very new to this and Jquery. I'm trying to create an animation that will play once the user scrolls to it on the website. I created a scroll script that works great when i'm simply changing a background-color when the users scroll to the element, but i can't figure out how to attach it to my SVG animation. I thought it would be as simple as nesting my GSAP code within my Jqeury but it's not working. My goal is to have the SVG play once the user scrolls to it, and then stop playing if the user scroll away from the icon. I also notice the SVG is floating outside of the Div. Any advice would be appreciated.
  14. How can I make a text float in like a wave from left to right. I am able to get the text into the frame normally but not like a wave form. Is there a way of doing it?
  15. Exhumator

    Dropdown (HTML select) component

    Greetings, i would like to create my own HTML dropdown component, similiar to this one but with GreenSock animation support I have following questions: Is there any effective way of creating nice component code for greensock or it really doesn't matter (KISS method and reusable code)? How can i animate scrolling inner content by items? (i guess i will need to measure height of one item and then scroll it) Can i publish that component somewhere for others? I would like to create animated UI component pack with some extra JS features like searching etc. Thanks for any kind of help.
  16. Hi all, I have been stuck because of this click function I want to work. Basically what I want to achieve is if you hover on the item the animation wil start and when unhover the animation wil reverse, this happens to work really good. The part i'm having problems with is the click function. if the user click on the button the div that is related to the button will be shown. Right now if the button is clicked the div will hide or not being shown. I think the reason for the related div not being shown is because of the Gsap animation. I could help some advice for keeping me in the good direction how I could make this work. see my codepen
  17. I tried to add a border to a banner Ive made, but none of the tries worked i tried .to(type1, .3,{backgroundColor: "#000000", border:"40px #00a1d6 solid"}) I tried with an inset and i get the same effect but I dont want it to be transparent. .to(type1, .3,{backgroundColor: "#000000", box:"inset 0 0 0 7px #00a1d6 solid"}) I like how it looks with the inset but I the only thing about it is the shadow effect and how things can be seen under the inset once the logo passes by. Here is my codepen
  18. I am having issues with my Atom editor and my code. I am used to codepen, but I decided to stray away from it and use an editor right on my laptop. I am trying to use GreenSock and I honestly cannot get anything to work. I'm new at it and I understand how to do certain things while I looked up the documentation, but I cant get anything to work. I am very confused as to the arrangement of scripts if I am even doing it correctly. I made a mockup tryout from a tutorial here, but I cant get a simple animation working even if the code if practically from here. any help will be appreciated. <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="pathTo/stylesheet.css"> <script type="text/javascript" src=""></script> <script type="text/javascript" src="pathTo/script.js"></script> <script src=""></script> </head> <body> <div id="box" class="box green"></div> </body> </html> .box { width:50px; height:50px; position:relative; border-radius:6px; margin-top:4px; display:inline-block } .green{ background-color:#6fb936; } var obj = document.getElementById('box');, 1.5, {width:100});
  19. Hi, I am trying to slide two lines in a campaign (one line in one frame and the second in the second frame). I want the second line to follow the first line after few seconds. I am able to slide in and slide out the first line but when I add the second line in the code, the code does not work. Can anyone help me out in this. Here is the link to the jsfiddle: (If you remove line 4 and 5 from the JS code, you will see the code working. But when I will add the lines back, the code stops working) Thanks
  20. dragon_89

    How to reveal text with ball rolling

    Hi, I am new to greensock and I need little help with it. I am trying to reveal few words (2-3 words in a line) as the ball rolls across the x-axis. Is there a way to do that? In my code, the ball rolls till then end and then displays the text, but I want the text to be displayed as the ball moves across. Codepen link: Thanks
  21. single0speed

    Need Help With Advanced Site Tabs GSAP

    Hey guys I am Justin, first post here. The community over here seems to know there stuff so hopefully you can solve my problem with making tabs in GSAP I am making this website like eBay, but much smaller scale. The top of the site is broken into three tabs. Browse / My Hub / Sell. If the user is in the browse tab he will be searching listings (this is also the default tab on the home page) If the user is in My Hub he will be looking at account information and watchlist... If the user is in sell he will be selling things ect. I can do simple tabs no worries but I need help with advanced tabs. Each tab will have lots of links and links within links ect. But I want the tabs to act just like the tabs do in chrome, so the user can go to all different places in each tabbed section of the site and the other tabs will be right how they were... This is so users can be browsing and decide to add funds, sell something, look at there account, update details.... they can then go back to where they were browsing. Maybe I can use browser cache for the other two tabs that are not used each time the used tab page loads. I would almost want it so the user could upload photos in the sell tab wile browsing listings in the sell tab. I don't know if it can be done, but I am looking forward to any advice/basic codepen.
  22. flysi3000

    Flickering border on centered div

    Hi - this isn't a strictly GSAP related question, but you guys are wicked smaaaht, so I thought I'd ask here. (Incidentally, I'm using the fantastic Bannertime generator from @joe_midi, but this isn't related to that either). I have a object that's centered in the browser window using a combination of negative margins and absolute positioning. When resizing the browser window, the border flickers on the right and bottom edges in Safari only - it's fine in Chrome and Firefox. The structure of the object is as follows: <div class="banner"> <div class="border"></div> </div> The .border div is 2px smaller than its parent element, to account for the 1px border all around, and it's this border that flickers when the browser is resized. I have a demo of this in action here. Again, I see this behavior in Safari only. I would love any suggestions as to how I can prevent this from happening. Thanks, guys!
  23. andyhullinger

    Smoothing out flexbox?

    Here is an animated "wordcloud-ish meets bubblechart-esque" data viz exercise attempting to replace heavy packing algorithms, d3.js, etc. with some short, simple, sweet GSAP and exploit CSS3 flex-box's flex-wrap. The idea is to allow a fixed collection of words to grow/shrink (coming from a stream of PubNub "votes") in place without overlapping. Essentially nudging/hugging their neighbors but maintaining the overall position. For my needs it's working beautifully, until a "line-break" occurs. Curious to know if any of you might have ideas for smoothing out the "jump" when a word needs to hop onto the next line? Or perhaps I'm missing something easy by incorporating GSAP's split text.
  24. ESPN is hiring! If you're a front end developer looking for a part time gig (29hrs) please apply in the link below!
  25. Hello, I'm uploading my published Adobe Animate creative to Google Adwords, I've never done this before. I have in my zip file the image, the javascript, and the HTML so everything should be good to go. However when I upload and preview it, it doesn't animate. It's just the static background image. Am I doing something incorrectly with my code? Should I be doing something different with my publishing settings in Animate? Has anyone else encountered this when trying to put an animated ad onto Adwords? Thanks in advance for your help.