Jump to content
GreenSock

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

Search the Community

Showing results for tags 'jquery'.



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

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


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 144 results

  1. I am trying to create a website using the background effect exactly similar as implemented in this website, http://brightmedia.pl/ . On inspect element the div that creating the parallax effect on background from mouse move and scroll as well, we can see that it is changing the translate3D() property of the element on mouse move. Please guide me how can I achieve this same background effect?
  2. GreenSock

    jquery.gsap.js

    Good news for anyone using jQuery.animate() - the new jquery.gsap.js plugin allows you to have GSAP take control under the hood so that your animations perform better; no need to change any of your code. Plus GSAP adds numerous capabilities, allowing you to tween colors, 2D transforms (rotation, scaleX, scaleY, skewX, skewY, x, y), 3D transforms (rotationX, rotationY, z, perspective), backgroundPosition, boxShadow, and lots more. You can even animate to a different className! This plugin makes it very easy to audition GSAP in your project without needing to learn a new API. We still highly recommend learning the regular GSAP API because it's much more flexible, robust, and object-oriented than jQuery.animate(), but for practical purposes this plugin delivers a bunch of power with almost zero effort. Benefits Up to 20x faster than jQuery's native animate() method. See the interactive speed comparison for yourself. Works exactly the same as the regular jQuery.animate() method. Same syntax. No need to change your code. Just load the plugin (and TweenMax or TweenLite & CSSPlugin) and you're done. Adds the ability to animate additional properties (without vendor prefixes): colors (backgroundColor, borderColor, color, etc.) boxShadow textShadow 2D transforms like rotation, scaleX, scaleY, x, y, skewX, and skewY, including 2D transformOrigin functionality 3D transforms like rotationY rotationX, z, and perspective, including 3D transformOrigin functionality borderRadius (without the need to define each corner and use browser prefixes) className which allows you to define a className (or use “+=” or “-=” to add/remove a class) and have the engine figure out which properties are different and animate the differences using whatever ease and duration you want. backgroundPosition clip Animate along Bezier curves, even rotating along with the path or plotting a smoothly curved Bezier through a set of points you provide (including 3D!). GSAP’s Bezier system is super flexible in that it’s not just for x/y/z coordinates – it can handle ANY set of properties. Plus it will automatically adjust the movement so that it’s correctly proportioned the entire way, avoiding a common problem that plagues Bezier animation systems. You can define Bezier data as Cubic or Quadratic or raw anchor points. Add tons of easing options including proprietary SlowMo and SteppedEase along with all the industry standards When animating the rotation of an object, automatically go in the shortest direction (clockwise or counter-clockwise) using shortRotation, shortRotationX, or shortRotationY For a detailed comparison between jQuery and GSAP, check out the cage match. Usage Download the files (requires version 1.8.0 (or later) of TweenMax or TweenLite!) and then add the appropriate script tags to your page. The plugin file (jquery.gsap.min.js) itself does NOT include GSAP because you get to choose which files you want to load depending on the features you want. The simplest way to get all the goodies is by loading TweenMax (which includes TweenLite, CSSPlugin, TimelineLite, TimelineMax, EasePack, BezierPlugin, and RoundPropsPlugin too). For example, assuming you put the TweenMax.min.js file into a folder named "js" which is in the same directory as your HTML file, you'd simply place the following code into your HTML file: All the goodies: <script src="js/TweenMax.min.js"></script> <script src="js/jquery.gsap.min.js"></script> If, however, you're more concerned about file size and only want to use TweenLite, CSSPlugin (for animating DOM elements), and some extra eases, here is a common set of script tags: Lightweight: <script src="js/plugins/CSSPlugin.min.js"></script> <script src="js/easing/EasePack.min.js"></script> <script src="js/TweenLite.min.js"></script> <script src="js/jquery.gsap.min.js"></script> Then, to animate things, you can use the regular jQuery.animate() method like this: //tween all elements with class "myClass" to top:100px and left:200px over the course of 3 seconds $(".myClass").animate({top:100, left:200}, 3000); //do the same thing, but with a Strong.easeOut ease $(".myClass").animate({top:100, left:200}, {duration:3000, easing:"easeOutStrong"}); //tween width to 50% and then height to 200px (sequenced) and then call myFunction $(".myClass").animate({width:"50%"}, 2000).animate({height:"200px"}, {duration:3000, complete:myFunction}); See jQuery's API docs for details about the syntax and options available with the animate() method. And yes, the jQuery.stop() method works too. Caveats If you define any of the following in the animate() call, it will revert to the native jQuery.animate() method in order to maximize compatibility (meaning no GSAP speed boost and no GSAP-specific special properties will work in that particular call): a "step" function - providing the parameters to the callback that jQuery normally does would be too costly performance-wise. One of the biggest goals of GSAP is optimized performance; We'd strongly recommend NOT using a "step" function for that reason. Instead, you can use an onUpdate if you want a function to be called each time the values are updated. Anything with a value of "show", "hide", "toggle", "scrollTop" or "scrollLeft". jQuery handles these in a unique way and we don't want to add the code into CSSPlugin that would be required to support them natively in GSAP. If skipGSAP:true is found in the "properties" parameter, it will force things to fall back to the native jQuery.animate() method. So if a particular animation is acting different than what you're used to with the native jQuery.animate() method, you can just force the fallback using this special property. Like $(".myClass").animate({scrollTop:200, skipGSAP:true}); This is our first crack at a jQuery plugin, so please let us know if anything breaks or if you have ideas for improvement.
  3. Hello, I am discovering GSAP and I did an exercice with TweenMax, And I don't understand why I have to write : TweenMax.set('....', {transformPerspective: xxx}); If I write the same thing with TweenMax.to and it don't works ... Can someone tell me when we have to use the 1st one and the 2nd one ?
  4. Hi there, I'm having an issue with GSAP creating lots of detached DOM items in chrome when a parent div is deleted during a tween, despite attempting to stop the tweens. When I do this using just JQuery and not include the GSAP plugin, no detached items remain. To view detached items in chrome I use the following under "Discover detached DOM tree memory leaks with Heap Snapshots": https://developers.google.com/web/tools/chrome-devtools/memory-problems/ Code is below, you'll need jQuery, GSAP, Tween Max and one image. 1) Check for detached items in chrome (you'll see a few that GSAP etc. has by default) 2) Click "Start Tween", the during the 10 second tween click "Stop Tween and Remove Div" 3) Re-check for detached items in chrome. You'll see more have been created. (i.e. not removed by the tween stop). Any help would be greatly appreciated, have switched GSAP for jQuery off in my code for the time being. <!DOCTYPE html> <html> <head> <title>Tween Test</title> <script src="../jquery-3.0.0.min.js"></script> <script src="../greensock-js/src/minified/jquery.gsap.min.js"></script> <script src="../greensock-js/src/minified/TweenMax.min.js"></script> <script> function TweenMe() { jQuery("#innerDiv").animate({ opacity: '0' }, 10000); } function StopTween() { jQuery("#innerDiv").stop(true, false); jQuery("#outerDiv").remove(); } </script> </head> <body> <button onclick="TweenMe();">Start Tween</button> <br /> <br /> <button onclick="StopTween();">Stop Tween and Remove Div</button> <br /> <br /> <div id="outerDiv"> <div id="innerDiv"> <img src="../media/img/red_square.jpg" id="imgMain" style="position:absolute;" /> </div> </div> </body> jquery.gsap.min.js jquery-3.0.0.min.js TweenMax.min.js
  5. Hello! I'm trying to apply an animation to the same element in different time lines. But it works in jumps - without a smooth transition between the states of the element. I have a task to do animation with many elements inside one screen. I have several scenes that need to be run by scrolling or clicking on the menu. Under the link all works approximately, as it is necessary to me. One problem is that the animation does not go smoothly from the first state to the second state and then to the third. https://codepen.io/yuliarushay/pen/PBjeyN Thanks!
  6. 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
  7. Sceik

    JQuery clock to GSAP

    So for a school product I really want to recreate something like this, but the example here is using jQuery. One of the conditions of the challenge was to use the GSAP libraries, so jQuery is not allowed. Is there an easy way to make this kind of clock using GSAP? Is there fast way to replace jQuery with GSAP withing my js files? I'm a beginner so all the tips are welcome!
  8. Hello, I am having a problem in creating a hover dropdown using GSAP animations to stagger in links after the container fades and drops in. After the user hovers off, it does another timeline in reverse. However, if a user were to go back and forth too quickly there are partial or full loops of the animations over and over depending on the swipes across the trigger. I am wondering if there is a way GSAP knows and animations are playing and will not allow another set to run if another is playing. Something along the lines of if tl starts and the user hovers off then it finish before starting timeLine's animation...? Thanks in Advance!
  9. How do I execute a function after an animation has completed? I've got a simple animation: I grab an element, and then I animate it. Lets say my animation function is called changeState(). I want to do this sequence: 1. changeState() 2. selectNextElement() 3. changeState() selectNextElement() should only run once changeState() has completed it's animation sequence. Here's my stub for changeState: // get current block and animate it function changeState() { var currentBlock = $(".current") ; // colortween the current block var tl = new TimelineMax() ; tl.to( currentBlock, 1, { backgroundColor:"rgb(205,151,20)" } ) .to( currentBlock, 1, { backgroundColor:"rgb(152, 129, 74)" } ) ; }
  10. Hi I'm trying to replicated the transitions on this pages sections http://cuberto.com using TweenMax. var slides=document.querySelectorAll('.slide'); var tl=new TimelineLite({paused:true}); for(var i=slides.length;i--;){ var D=document.createElement('div'); D.className='Dot'; D.id='Dot'+i; D.addEventListener('click',function(){ tl.seek(this.id).pause() }); document.getElementById('Dots').appendChild(D); tl.add('Dot'+i) if(i>0){ if(i!=slides.length-1) { tl.addPause() } tl .set(slides[i-1].getElementsByClassName("sideDetails"), {width: "0"}) .fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {width:'50%'},{ width: "100%", ease: Power2.easeInOut}) .to(slides[i].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60", ease: Power2.easeInOut},0) .set(slides[i],{ background: "none"}) .fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {x: "0%"},{ x: "100%", ease: Power2.easeInOut}, .3) .to('#Dot'+i,.7,{backgroundColor:'rgba(255,255,255,0.2)'},'L'+i) .set(slides[i],{zIndex:1-i}) .set(slides[i-1],{zIndex:slides.length}) .to(slides[i-1].getElementsByClassName("sideDetails"), .3,{width: "50%",ease: Power2.easeInOut}, .6) .fromTo(slides[i-1].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60" }, {opacity: "1", y:"0",ease: Power2.easeInOut},.6) }; }; full code at codepen can be found here I'm basically trying to transition between a bunch of sliders with a swipe animation, I have alternated the element i would like to transition on each slide in black or pink so I can see the animation. I can seem to isolate the animation to the current slide - in essence I want the left hand div to grow to 100%, then animate off the page to the right, then switch to the next slider and animate the left hand dive to a width of 50% from an initial state of 0. I believe that is what the Cuberto site is doing. However I am getting in an awful mess with the scroll event firing an animation on all the slides. I'm not particularly competent with vanilla javascript but would like to attempt this with or without jQuery. I have tried pagepiling.js and fullpage.js but this doesn't achieve the effect I'm looking for. I could really do with a a resolution I can go to my client with, or at least a direction I could go in. Thanks javascript jquery horizontal-scrolling gsap pagepiling.js shareeditdeleteflag asked 4 mins ago DansBananaLoafcake 62 add a comment
  11. Hello, I was trying to make a hover function with GSAP with timelinemax. In this, there are lists of elements which on hover will take up an x position and moves back to original position on mouse out. But, here, when I move the cursor in between lists items, the animation doesn't stop, but instead, it waits for the previous one to finish. Traditionally in jQuery, this is achieved through stop() method. What can we do here? and how do we do it? Thanks
  12. I want to know how to add animation to SVG image groups because I tried but it didn't work. Maybe its already a topic, then please guide me to it, because I tried from my side but couldn't find anything related to it. And I am talking about a group which has many groups and elements in it.
  13. Hello, I am trying to implement the smooth scroll when user click on the anchor tag then it will scroll and reach the target. it's working perfectly with all the anchor tag. Now my issue is, I have two tabs called as part1 and part2. There is no data in part1 but I have 3-4 anchor tags in the part2. I have to set a smooth scroll for that. I don't want a smooth scroll when the user clicks on part1 or part2. <div class="tabs"> <ul class="tab_click"> <li class="current"><a href="#part1" >Part1</a></li> <li><a href="#part2">part2</a></li> </ul> </div> I need a smoth scroll when user click on the below anchor tag. <ul> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> <li><a href="terms.php">Terms</a></li> </ul> Would you help me out in this issue?
  14. 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 .
  15. I am working on some sort of animation so I have prepared a demo which relates exactly to the task. I am inter-changing the classes after the first timeline completes and running another timeline when the user clicks the second time. The problem is when the second timeline is played, the tween adds the previous tween values to the element which I am tweening on the second click. If you look at the codepen example, when running second timeline i.e home_slide_2, the block_1 element is taking x value from the previous tween making animte both x and y values. Can anyone guide me on this that what I am doing wrong here.
  16. Good day lads. I have a pressing question and I am hoping this is the right place to ask. Can anyone direct me on the general approach towards achieving scrolling like these on the following sites - http://fantasy.co/ and https://www.ramotion.com/. Generally what I want to know is how to listen for the onScroll event and scroll to an anchor or an element on the page such as can be seen from those sites. I've tried searching online but all the tutorials seem to be doing this on click of an anchor link whereas I want to achieve this on scroll. Anyone able to help?
  17. Hi. We have a digital signage content editor with many widgets, and 2 of the widgets use gsap with jquery plugin, and we added another jquery plugin for a new widget (http://wowslider.com/), and a few of the features in that library didn't work, I was debugging for a long time when I found that it conflicts with the gsap jQuery plugin, more precisely the easings defined on the jQuery object, for example jQuery.easing.easeInOutExpo, because the easings share the same name in both libraries, but they work differently, the variable has different function references in the two libraries. Currently the gsap definition is in place, which causes some wowslider features to not work. I tested removing gsap, and then those features worked. I already contacted their support, but they couldn't give a solution, and I want to avoid modifying the code of these libraries. All I would like to ask for is some tips to avoid this issue. Is there a no-conflict option in gsap plugin? Can I separate two jQuery instances for the two libraries? Thanks in advance! Roland
  18. Hi Greensock, I'm diving into jQuery and was curious if it's selector :animated and such will scope GSAP tweening. Is that true/possible?
  19. Hi I am having a conflict I can't replicate. The solution works fine in the codepen( If you look at the codepen in IE10, the effect works perfectly (place div in center of viewport on click), but in my finished page, the scrollTo just goes all over the place and lands in a different position each time. It works fine in IE11 but not IE10 which is a requirement for my client. I tried matching the codepen function exactly to my production functions but the error still occurs. Here is a copy for your review that is condensed: window.onload = function(){ // Scroll to X and Y position buttons // bullet points var logoBtn = document.getElementById("logo"); var section1Btn = document.getElementById("section1Btn"); var section2Btn = document.getElementById("section2Btn"); var section3Btn = document.getElementById("section3Btn"); var section4Btn = document.getElementById("section4Btn"); var section5Btn = document.getElementById("section5Btn"); var section6Btn = document.getElementById("section6Btn"); var section7Btn = document.getElementById("section7Btn"); // menu buttons var firstnav = document.getElementById("firstnav"); var secondnav = document.getElementById("secondnav"); var thirdnav = document.getElementById("thirdnav"); var fourthnav = document.getElementById("fourthnav"); var fifthnav = document.getElementById("fifthnav"); var sixthnav = document.getElementById("sixthnav"); var seventhnav = document.getElementById("seventhnav"); var firstdot = document.getElementById("firstdot"); var seconddot = document.getElementById("seconddot"); var thirddot = document.getElementById("thirddot"); var fourthdot = document.getElementById("fourthdot"); var fifthdot = document.getElementById("fifthdot"); var sixthdot = document.getElementById("sixthdot"); var seventhdot = document.getElementById("seventhdot"); // buttons on central spinning circle var firstcirclebtn = document.getElementById("invisible-btn1"); var secondcirclebtn = document.getElementById("invisible-btn2"); var thirdcirclebtn = document.getElementById("invisible-btn3"); var fourthcirclebtn = document.getElementById("invisible-btn4"); var fifthcirclebtn = document.getElementById("invisible-btn5"); var sixthcirclebtn = document.getElementById("invisible-btn6"); // Scroll to Bullets logoBtn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:"#firstdot", offsetY: $(window).innerHeight() / 2 - $('#firstdot').height() / 2, x:"#firstdot", offsetX: $(window).innerWidth() / 2 - $('#firstdot').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; // Scroll to Start div id on page load TweenLite.to(window, 1, {scrollTo:{y:"#firstdot", offsetY: $(window).innerHeight() / 2 - $('#firstdot').height() / 2, x:"#firstdot", offsetX: $(window).innerWidth() / 2 - $('#firstdot').width() / 2, autoKill:false, behavior: 'smooth'}},100); // Scroll to Bullets section1Btn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:"#firstdot", offsetY: $(window).innerHeight() / 2 - $('#firstdot').height() / 2, x:"#firstdot", offsetX: $(window).innerWidth() / 2 - $('#firstdot').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; section2Btn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:"#seconddot", offsetY: $(window).innerHeight() / 2 - $('#seconddot').height() / 2, x:"#seconddot", offsetX: $(window).innerWidth() / 2 - $('#seconddot').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; section3Btn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:"#thirddot", offsetY: $(window).innerHeight() / 2 - $('#thirddot').height() / 2, x:"#thirddot", offsetX: $(window).innerWidth() / 2 - $('#thirddot').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; section4Btn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:"#fourthdot", offsetY: $(window).innerHeight() / 2 - $('#fourthdot').height() / 2, x:"#fourthdot", offsetX: $(window).innerWidth() / 2 - $('#fourthdot').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; section5Btn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:"#fifthdot", offsetY: $(window).innerHeight() / 2 - $('#fifthdot').height() / 2, x:"#fifthdot", offsetX: $(window).innerWidth() / 2 - $('#fifthdot').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; section6Btn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:"#sixthdot", offsetY: $(window).innerHeight() / 2 - $('#sixthdot').height() / 2, x:"#sixthdot", offsetX: $(window).innerWidth() / 2 - $('#sixthdot').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; section7Btn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:"#seventhdot", offsetY: $(window).innerHeight() / 2 - $('#seventhdot').height() / 2, x:"#seventhdot", offsetX: $(window).innerWidth() / 2 - $('#seventhdot').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; // menu nav // Scroll to Bullets firstnav.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".first-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.first-coordinate-2').height() / 2, x:".first-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.first-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; secondnav.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".second-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.second-coordinate-2').height() / 2, x:".second-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.second-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; thirdnav.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".third-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.third-coordinate-2').height() / 2, x:".third-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.third-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; fourthnav.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".fourth-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.fourth-coordinate-2').height() / 2, x:".fourth-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.fourth-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; fifthnav.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".fifth-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.fifth-coordinate-2').height() / 2, x:".fifth-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.fifth-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; sixthnav.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".sixth-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.sixth-coordinate-2').height() / 2, x:".sixth-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.sixth-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; seventhnav.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".seventh-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.seventh-coordinate-2').height() / 2, x:".seventh-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.seventh-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; firstcirclebtn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".second-coordinate-3", offsetY: $(window).innerHeight() / 2 - $('.second-coordinate-3').height() / 2, x:".second-coordinate-3", offsetX: $(window).innerWidth() / 2 - $('.second-coordinate-3').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; secondcirclebtn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".third-coordinate-3", offsetY: $(window).innerHeight() / 2 - $('.third-coordinate-3').height() / 2, x:".third-coordinate-3", offsetX: $(window).innerWidth() / 2 - $('.third-coordinate-3').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; thirdcirclebtn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".fourth-coordinate-3", offsetY: $(window).innerHeight() / 2 - $('.fourth-coordinate-3').height() / 2, x:".fourth-coordinate-3", offsetX: $(window).innerWidth() / 2 - $('.fourth-coordinate-3').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; fourthcirclebtn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".fifth-coordinate-3", offsetY: $(window).innerHeight() / 2 - $('.fifth-coordinate-3').height() / 2, x:".fifth-coordinate-3", offsetX: $(window).innerWidth() / 2 - $('.fifth-coordinate-3').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; fifthcirclebtn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".sixth-coordinate-3", offsetY: $(window).innerHeight() / 2 - $('.sixth-coordinate-3').height() / 2, x:".sixth-coordinate-3", offsetX: $(window).innerWidth() / 2 - $('.sixth-coordinate-3').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; sixthcirclebtn.onclick = function() { TweenLite.to(window, 1, {scrollTo:{y:".seventh-coordinate-3", offsetY: $(window).innerHeight() / 2 - $('.seventh-coordinate-3').height() / 2, x:".seventh-coordinate-3", offsetX: $(window).innerWidth() / 2 - $('.seventh-coordinate-3').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; }(jQuery); There are other jquery plugins I have used, so perhaps the conflict is from there? <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollToPlugin-latest-beta.js"></script> <!-- Bootstrap pre built stuff--> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> The console shows no errors so its hard to debug. Any help would be greatly appreciated, it's the last obstacle of the project!
  20. Hello everybody I am trying to convert, refactor a jQuery animation to pure GSAP. Using gsap.jquery gave several errors. Unlike in the guide written I found one always requires jquery still. I want to convert jquery.animate() to GSAP function. What links and resources are there to help me with converting Jquery to pure GSAP?
  21. Hi, I stumbled across a website that is using GSAP (TweenMax, based on Wappalyzer) to animate its elements, and I found one specific animation really interesting. If you visit the website in Desktop (http://thieb.co) and arrive at the home page, click one of the projects and you'll be brought into the specific project page. If you see carefully, the project title animates from the home page position to the project page position, and the URL changes. But the project title element is still the same. I was just trying to figure out how to do this and I've been searching all over the internet for this. Since the creator of the website uses GSAP, I guess this is where I can start. Does anyone knows how to create a similar effect for that? Or can lead me to a place where I can learn how to achieve that effect? Thanks, Alfian
  22. Im attempting to build a 2 Scene ScrollMagic / GSAP function. Scene 1 is when the content enters the screen, and Scene 2 is when the content is leaving the screen. Scene 1 works fine while using the function's element as a trigger, but when I try to use a child element as the Scene 2 trigger the entire second scene / TimelineMax scene seems to break. --- The first Scene of the function (scene_in) works fine with the triggerElement set as the selector of the parent function: But on the second Scene of the function (scene_out) the triggerElement does not seem to work at all: $('.text-fade-in > ul').each(function(){ var thisSelector = this; var thisLi = $('li', this); var thisLiHeight = thisLi.height(); var fade_in = new TimelineMax(); fade_in.delay(.45); fade_in.staggerFrom(thisLi, .5, {opacity: 0, top: 14, ease: Sine.easeIn}, .15); var scene_in = new ScrollMagic.Scene({triggerElement: thisSelector, triggerHook: 'onEnter'}) .addIndicators({name:"li_fade"}) .setTween(fade_in) .addTo(controller); var fade_out = new TimelineMax(); fade_out.to(thisLi, 1, {opacity: 0, top: -10, ease: Sine.easeOut}, 0); var scene_out = new ScrollMagic.Scene({triggerElement: thisLi, triggerHook: 'onLeave', duration: thisLiHeight}) .addIndicators({name:"li_fade_out"}) .setTween(fade_out) .addTo(controller); });
  23. How can I achieve this scroll animation on the hero sections on this website - https://www.sapientrazorfish.com/ using scrollmagic and GSAP or any plugin you can direct me towards.My main aim here is to achieve the overlapping section and snap effect. Looking at my codepen, I've achieved the overlapping effect but can't just seem to make them snap on scroll just like the website. Any help is appreciated.
  24. I am trying to make an coverflow slider like used on the HomePage of this website http://www.onedayinmyworld.com/. For reference, I am sharing the codepen demo of my progress and there are a lot of things with which I am struggling. I want to add dragging feature to it with center element highlighted i.e active class added to the center div. Can anyone help in solving this problem?
  25. Hey everyone, thanks in advance for your time. I've searched the forums for common solutions, but i'm a bit too new to JS to translate the more complicated ones into my simple task. I'm currently trying to get the animation in the provided codepen to work with the included mouseover feature correctly. If you try and mouseover while the animation runs, you'll see that the text elements fail to tween in by the time you mouseleave. I've searched the forums for solutions, but i'm still pretty new to JS so i'm rather dense as to how to use the isActive() function, which I assume would need to be used to prevent the mouseover working until all the intro elements have tweened in. To replicate this, try to mouseover straight away on the provided codepen, and you'll see that the text fails to appear from the intro animation. I've annotated the codepen, but here's the mouseover part. var wwdtransition = new TimelineMax({paused:true}); wwdtransition.to ('.screenobject',0.5,{y:300, autoAlpha:0}) .to('#playbutton', .3, {autoAlpha:1},"-=.2"); ; //mouseover functions $(document).on("mouseenter", ".col-md-12", function() { wwdtransition.play(); }).on("mouseleave", ".col-md-12", function(){ wwdtransition.reverse(); }); Thanks again for your time, i'm really enjoying using GSAP, and with a solution to this, I imagine I can just copy + paste it to replicate the effect in future work.
×