Jump to content

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

Search the Community

Showing results for tags 'ajax'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


  • FAQ Landing Page


  • Examples
  • Showcase


  • Products
  • Plugins


  • Learning Center
  • Blog


  • ScrollTrigger Demos


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 16 results

  1. I'm trying to animate new Ajax content with the same property that original one. I've made this simple codePen for a better understanding. When box is clicked, it's animated by timeline. When button is clicked, new box is loaded. But I've probably made something wrong, because I don't understand why it triggers animation and why, on click on one of boxes, they are not moving together.
  2. Hi, I am new to GSAP and trying to reload GSAP/ScrollTigger on DOM #content element change, which can done by many ways, my case: jQuery("#content").load("/somePageURL #content") then the new content replace current page DOM content, and at this stage my code dont work. On my code pen example https://codepen.io/aboutzahurul/pen/bGeQKvy everything works fine on page load (not sure if its the correct way or not) but as if i change #content by calling jQuery("#content").load("/somePageURL #content"); and i replace current content and add custom jquery trigger jQuery(document).trigger('page.loaded',[link]); so i can reload the main timeline function based on the custom trigger page.Loaded but it never load correctly and GSAP animation breaks, only it work if i reload the page on browser. sorry on my Codepen example i didn't added the ajax function to jQuery("#content").load(); cos i am not very expart on codepen but i hope you guys got the idea. On my newly replaced #content may have more .item element or less or empty so i tried to do some checks before i call GSAP timeline. Current HTML: <div id="content"> <div class="item"> <div class="img-box"><img src="https://via.placeholder.com/300x300?text=001" /></div> <h2><span>title1</span></h2> </div> <div class="item"> <div class="img-box"><img src="https://via.placeholder.com/300x300?text=002" /></div> <h2><span>title2</span></h2> </div> <div class="item"> <div class="img-box"><img src="https://via.placeholder.com/300x300?text=003" /></div> <h2><span>title3</span></h2> </div> </div> after jQuery("#content").load("/somePageURL #content"); call newly replaced HTML (#content) may be like this: <div id="content"> <div class="item"> <h2><span>title1</span></h2> </div> <div class="item"> <div class="img-box"><img src="https://via.placeholder.com/300x300?text=002" /></div> </div> <div class="item"> <div class="img-box"><img src="https://via.placeholder.com/300x300?text=003" /></div> <h2><span>title3</span></h2> </div> <div class="item"> <div class="img-box"><img src="https://via.placeholder.com/300x300?text=004" /></div> <h2><span>title4</span></h2> </div> <div class="item"> <div class="img-box"><img src="https://via.placeholder.com/300x300?text=005" /></div> </div> <div class="item"> <div class="img-box"><img src="https://via.placeholder.com/300x300?text=006" /></div> <h2><span>title6</span></h2> </div> </div> So now, how can i reload the scroll triggered animation correctly without reloading the page? Please help... Thanks.
  3. Hello, i try to use scrollTrigger on appended items with ajax, but scrolltrigger.refresh() doesn't work, how can i recalculate positions with ajax appended items. Here's link to website http://fashion-calendar.sigma-studio.pp.ua/index.php?route=blog/home
  4. Hello, first I wan't to give a big thanks to gsap creators. gsap is insane and scrolltrigger is THE thing that was missing to make gsap perfect. But i have troubles with Scrolltrigger, scrolltrigger works perfectly when I load a page, but my website uses ajax transitions between pages, and I can't figure out how to make my animations works again when I navigate to another page. I don't have errors in console, but triggers just don't do anything. I tried to use the refresh() method, or kill() on my scrolltrigger instance and then reload the js, but they don't seems to do the job. My ScrollTrigger declaration looks like this : initMainAnimations() { const selector = ".feature h3, " + ".feature .img-container, " + ".feature p, " + ".feature a, " + "#see-also .other"; const targets = gsap.utils.toArray(selector); targets.forEach((target) => { ScrollTrigger.create({ trigger : target, onEnter : () => target.classList.add('active'), onEnterBack : () => target.classList.add('active'), start : "top 95%", id : 'main_scroll_trigger' }) }); } (I use barba.js for pages transitions) To be honest i'm lost and i don't really know even theoretically what to do to solve this problem. Maybe gsap can't find ajax loaded elements because of the DOM being modified ? Maybe there is a way to drop everything related to gsap and reload my js ? Maybe it's a noob's question and i'm really sorry if it's easy but i really have no idea of what to do... (sorry for bad english) Sorry i have no codepen to reproduce the case but I don't find a way to give you a small exemple of that, I can put the website online in case it helps. Let me know if you want to see more code. /* EDIT */ gsap actually find targets (it works if i log targets ) But if I set markers to true , I see that they are all on top of the page. even if I use the barba hook afterwhich fires my js after transition is fully done, gsap seems to create triggers before everything is loaded
  5. How to stagger elements after fetching data from api?
  6. See the Pen GSPreloader by GreenSock (@GreenSock) on CodePen. I had some fun creating a simple little preloader animation with spinning dots that animate in/out with a single JS call. This is what we're using on the new GreenSock.com. All it does is: Create a certain number of DIVs (you decide how many) with border-radius:50% to make them circular Offsets their transform-origin to whatever radius you define Rotates each one to disperse them around a big circle Drops them into a wrapper DIV that's fixed-position, centered perfectly in the window with a high z-index Creates a repeating/looping TimelineMax instance for each dot, animating its rotation "-=360" (360 less than whatever it starts at, thus one full rotation around the bigger circle) and then its skew by "+=360" (this is what makes it appear to "flip") Place each dot's TimelineMax into a master TimelineLite instance in a slightly staggered fashion. This TimelineLite serves as the container for the whole animation, making it simple to control as a whole. To animate out, the main TimelineLite gets paused, and a new tween for each dot animates it from wherever it happens to be, off the screen in a cool way (again, slightly staggered). This would be pretty tough or impossible to do with pure CSS. Features Completely customizable - use the config object to define the number of dots, the size of the dots, the radius of the circle, the colors (as many or as few colors as you want), the opacity and border of the background box, etc. Pure JS. Copy one JS function, and make sure you load TweenLite and CSSPlugin (or just TweenMax which has both), and you're good-to-go Automatically centers itself in the window and sets the container's z-index to 200 Call your preloader's active() method to turn it on or off. preloader.active(true) turns it on, preloader.active(false) turns it off, and you can check its status using preloader.active() (no parameter).
  7. Hey everyone. I am building a website using a drag and drop menu where a new page is opened when an element is dragged and dropped on one of the menu pages icon. It's been working alright for a while until today. It just takes me to the new page but page content doesn't load. This happens only in firefox. Everything works perfectly on all other browsers. I keep getting this error on firefox - NS_ERROR_FAILURE: TweenMax.min.js:15. I'm confused as at this point , I don't know how to move forward. Can someone help?
  8. GreenSock Community, I hope all is well. The ISSUE - Global Var not being Passed to local onComplete - onStart etc. Has anyone else experience this issue? Or is it something I am doing wrong? See below. It's not a GSAP issue, as far as I can tell... I created a simplified Codepen using just jQuery for testing. Here are the links: Codepen with GSAP - https://codepen.io/jh-thank-you/pen/pedXxO Codepen without GSAP - https://codepen.io/jh-thank-you/pen/QpaWbg Snippet from my Stack Overflow post: Thanks for any help/advice.
  9. GreenSock Community, Thanks for taking the time to read this post, also thanks in advance for any help you may provide. I have a modal that scales up a selected thumbnail into a scrollable slide container. Please note the CodePen only has the "Advil" link set to call in Ajax content (HTML and JS) from another CodePen Ajax-Modal-Content I have two problems with the Tween Path: The starting position does not seem to be the correct coordinates, despite my using that part of the code exactly as what the original example is using (see getPosition function and the rect var). I'm having an issue with the path animating on an arc (curved path). I think this is due to my using Top 50% and Left 50% along with transform/translate to center the image within the browser's window)... I seem to remember reading somewhere in the GSAP forums that this is due to the rendering order... that Top/Left/Right/Bottom are calculated last... if this is true, do you have any suggestions on how to center the image within the browser's window and solve this render order issue? The modal is based on a CodePen by one of the GreenSock Moderators (thanks again Blake for all the help Responsive Grid ). Also,the slide container is based on another GreenSock Community Member's example (thanks Chrysto http://codepen.io/bassta/pen/kDvmC). I have made the main part of the tween set to 6 seconds (slowing it down) so you can see how the starting position is off and how the top and left calculations happen at the end. Thanks again for any help/guidance.
  10. Hi all, I was wondering if you could help me out - here is my codePen: http://codepen.io/marklawrencedesign/pen/KNgdxL This pen simulates the real-life issue I am having using Ajax, except for demo purposes I am using '.append()' I have been as descriptive as possible in the pen to articulate the specific issue, but I will explain again here: I need to animate an ajax-loaded article on button click 'open' I realise that the loaded content will not be seen by the TL if I declare my variables pointing to these elements on page-load, therefore I am tying the 'master.add(...)' when the button is clicked / ajax content is available in the DOM. The pen works, the loaded content is indeed added to the page, and it animates as expected ONLY on the first play / close. If you click play, and then close a few times in the pen you will notice the animations still plays, but there is a progressively longer gap between each stage of the animations. Is it because on each 'open' click I am again adding to the master, and it is getting 'clogged' up? If so what should I do to clear the 'master.add(...)'? I have done a LOT of googling but I cannot find an answer, and I think I have gone in a big circle of pain. ...awesome product btw (when I can make it play ball ) Thanks in advance if you can help. Also - is there a better // more practical method to my code setup for this in general? It would be awesome for a GSAP Jedi to offer me advice - Im always looking for ways to improve how I approach things.
  11. Cor

    rolodex example?

    I would like to create a rolodex animation which a user can activate by typing a (part of a ) name or address. But I don't even know were to start! My basics are: Loading all persons from a mySQl database, create a <div>-card per person, and then I am lost... Any help is appreciated! TIA
  12. Hi, I've been using the TimelineMax library to animate navigation tabs that are loaded via AJAX. The problem that I am facing is that elements that are newly added to the DOM aren't animated, as they haven't been detected when the Timeline was created. Playing the timeline from the start has no effect especially .from() animations The linked codepen demonstrates my problem although I have replaced the AJAX call with a html load function. Thanks in advance
  13. Hi all, Firstly, loving greensock as it's cutting down my animation dev time considerably and the amount of support on these forums is outstanding. Have run into my first problem with it though. My tweens are working fine on a hard page load (it's a woocommerce product archive page), but as soon as I start using the Ajax product filters, they stop working. Kinda expected I guess as the DOM is being restructured after the filters have worked. Here's the pen: http://codepen.io/mattdown247/pen/mVKxBq When you hover over the blue boxes, they just slide down to reveal a Div underneath Usually I can overcome this in jQuery by using the '.on' method such as: $(document).on('hover','*selector*',function(){ ..... other code in here }); ... But I can't work out how I can integrate a failsafe method like that into my GSAP code. Any help would be greatly appreciated. Cheers Matt
  14. Hello to all, Firstly, thank you for making such a wonderful and amazing plugin. I am a complete newbie in the world of javascript so please be patient with me. I am making a slide in and out page transition after an ajax request, however, Its not very smooth and flawless. Can I please get some pointers on what options I can use to make this look beautiful like the transitions here - http://tympanus.net/Development/PageTransitions/ See how the footer jumps after new content is loaded.
  15. Hi, I have been loading a html file (including tweening) using ajax into a div and on first viewing the Tweens are working. However after clearing the div with jquery.empty() and reloading the same html file the tweens are no longer working in Firefox. To view an example please download attached files (sorry it's very basic). - Unzip and click on index.html. - Clicking on "Click to load file into div" will load the test.html file into a div of index.html. - Two images will come up. When mousing over the images boxes with text will appear. - Clicking on "Empty Div" will remove contents of div with .empty() - Clicking on "Click to load file into div" will bring in the test.html again but the tweens no longer work. This behaviour only happens when first firing the tweens. If you refresh the browser and click to add and remove the html the tweens will still work the first time. The Tweens work fine in IE9 but are not working in Firefox 20. Does anyone know why the tweens would not work the second time in Firefox? Any help would be great. Thanks test.zip
  16. Hello, I have a problem when I created an ajax request and want to tween new elements in my DOM. The idea : I get thumbnails from a youtube playlist and when it's done I add all thumbnails in a grid inside my DOM. By default all elements are non visible, once it's get loaded I tween them to make their opacity to 1. I think, like it's new elements TweenMax don't see them and can't make the animation works. Here's my code : var YOUTUBE = { wrappervideo: $('#videos'), animation_videos: function(videos) { var TL = new TimelineLite(); TL.staggerFromTo(videos,3,{css:{opacity:0},css:{opacity:1}},0.2); // for(var i = videos.length - 1; i >= 0; i--) { // TL.append(TweenMax.to(YOUTUBE.videos[i]), 0.5, { // css: { // opacity: 1 // } // }); // }; // TL.play(); console.log(TL) }, get: function() { $.getJSON("//gdata.youtube.com/feeds/api/playlists/E269D6C105CB2EB6?&alt=json&max-results=10", function(data) { var thumbnails = new Array(); var video_grid = new Array(); var html = ""; var number_of_lines = 3; for(var i = parseInt(data.feed.openSearch$totalResults.$t - 1); i >= 0; i--) { thumbnails.push([data.feed.entry[i].media$group.media$thumbnail[0], data.feed.entry[i].media$group.media$thumbnail[1]]) }; for(var i = thumbnails.length - 1; i >= 0; i--) { var _left = ((thumbnails[i][0].width + 7) * Math.round(i % number_of_lines)); var _top = ((thumbnails[i][0].height + 7) * Math.floor(i / number_of_lines)); var video = "<img src='" + thumbnails[i][0].url + "' width='" + thumbnails[i][0].width + "px' height='" + thumbnails[i][0].height + "px' class='listvid' style='position:absolute;top:" + _top + "px;left:" + _left + "px;' data-min-height='" + thumbnails[i][1].height + "' data-min-width='" + thumbnails[i][1].width + "' data-min-url='" + thumbnails[i][1].url + "'></>" video_grid.push($(video)); html += video; }; YOUTUBE.wrappervideo.empty().append(html); TweenMax.set(YOUTUBE.wrappervideo, { css: { marginTop: -parseInt(thumbnails[0][0].height), marginLeft: -parseInt(thumbnails[0][0].width), display: 'block' } }); YOUTUBE.animation_videos(video_grid); }); } } Do you see where I can make the animation run ?