Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 03/05/2018 in all areas

  1. Thats what I do when I run into these kind of problems, I console log the living hell out of every value associated with it and it usually points the way to the issue. Also verify that the target elements are where they are supposed to be in IE10. The centering equation itself looks right so I'm guessing this could be a positioning issue in the DOM rather than a scrollTo issue.
    4 points
  2. You definitely can do it that way ... but you'll want to create your Tweens once and reference them You might find it just a bit easier to do this with a Timeline because you only have to worry about starting/stopping/reseting one Timeline rather than two tweens.
    4 points
  3. Hello, this kind of transition between pages goes a bit beyond the resources that GSAP provides. Looking at the source code of the site you mentioned, it is worth noting that it is using a framework based on SPA (Single Page Application), to get this done you can search on some of these frameworks, these are the most used: - VueJs - ReactJS - AngularJs. After achieving this you can create Tweens that animate before and leave the page and animate when you enter and you will have this same transition effect.
    4 points
  4. Thanks for the demo. It seems various browsers have different rules when it comes to animating things in <defs>. Safest to avoid that. If you animate an actual path you should get consistent results. Frankly, I can't keep track of all the quirks but this thread is good to read every few months: I suspect there are some SVG experts around here who could give you some more specific details.
    3 points
  5. Hi and welcome to the GreenSock forums, I would suggest that you log some of the values you are tweening to to verify that you are passing in the proper information. For instance section1Btn.onclick = function() { //add some logs console.log("offsetY", $(window).innerHeight() / 2 - $('#firstdot').height() / 2); console.log("offsetX", $(window).innerWidth() / 2 - $('#firstdot').width() / 2;) 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); }; run that in IE10 and IE11 side by side and make sure you get the same values. If that works, then also try hard-coding the values for y:"#firstdot" and x:"#firstdot" just to help isolate where the mis-calculation may be. If you can confirm that scrollTo plugin is not tweening to the proper values then please provide a reduced case that only has one or two buttons that don't tween properly in IE10. The less code the better. Perhaps there is something we will be able to see in developer tools. Unfortunately, your live site is far too complex to dig into. also, the script url for ScrollToPlugin is odd https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollToPlugin-latest-beta.js Please be sure to use the most recent versions of TweenMax and ScrollToPlugin https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/plugins/ScrollToPlugin.min.js
    3 points
  6. Yup, Noturnoo is exactly right. That page is built based on SPA. There was a discussion about this just a few days ago: Hopefully some info in that thread helps. Unfortunately, there is quite a bit that you need to know beyond GSAP. If you make some progress and have a basic demo to show, its possible someone can help push you further in the right direction.
    3 points
  7. Well a pretty advanced demo if you are just getting started with animation and GSAP but for good reasons. The demo you posted uses HTML elements to create those stars and without any other content or animation it is struggling to run at 30FPS, now imagine using other animations on top of it and freezing your user's browsers. So it makes a lot of sense to use Canvas for it. I have left a lot of comments explaining almost every bit of the code that will explain all the math and tricks behind animation. You can reference docs for anything that you don't understand related to GSAP or google stuff related Canvas. But feel free to ask any questions. If you have done any canvas related animation there are many things worth noting in terms of performance. Like all paths are being drawn at once before they are painted on the canvas. It helps because all particles are of same color. If they were of different colors then it will take a lot more processing but I believe it will still easily animate 500 particles of different colors. For better performance, use a plain div tag with background image or gradient instead of trying to paint it on canvas. I know it is advanced demo and may not be what you expected though still give it a try and try to go through the code it. If you feel like you won't able to understand it, I have planned post a video tutorial in couple of days.
    3 points
  8. Hi @InTheOne Welcome to the forum. You're just missing the ScrollMagic GSAP plugin: <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script> That plugin allows ScrollMagic to hijack the tweens and timelines. More info: http://scrollmagic.io/docs/animation.GSAP.html Happy tweening and welcome aboard.
    2 points
  9. 2 points
  10. I didn't quite understand the question, and I'm not very familiar with ScrollMagic so I may not be able to give you exactly what you want, but ThrowPropsPlugin might be super helpful in this type of interaction. It can handle elegantly transitioning between any property going a particular velocity, and then landing at any spot you want; if necessary, it'll shoot past and come back (like overscrolling). It many ways, it's actually better than physics because you can control the duration, ease, and predict precisely where the landing point will be, even from the very start. https://greensock.com/docs/Plugins/ThrowPropsPlugin
    2 points
  11. I don't know what was the issue but the overlay div wasn't getting height as it's parent in Firefox 58.0.2 so I cleaned up your html and moved scripts in Codepen's settings. Trick is to scale up overlay div and set transformOrigin to '100% 100%' i.e. at the bottom right corner and then rotate overlay by 90 degrees. @Artsx I updated demo and added z transform to the background animation and perspective to the parent.
    2 points
  12. Thanks so much for the responses, hugely appreciated, I will try this out and get back to you.
    2 points
  13. It is happening because you have html and body height set to 100% so it adds scrollbar to both html and body. What you can do is, wrap the image that fades in inside another div, with overflow hidden. Also, instead of animating top/left you should animate x and y whenever possible, it will give you far better performance.
    2 points
  14. No worries. It happens. What Sahil was trying to point out is that the code you are using let actualTween = new TWEEN.Tween(origin) Is in no way related to GreenSock's API (TweenLite, TweenMax, DirectionalRotationPlugin, etc). It looks like Tween.js http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/ GSAP can animate any numeric property and works amazingly with (DOM/CSS, SVG and canvas) https://greensock.com/gsap People have great success using GSAP with Three.js to rotate / move cameras and objects
    2 points
  15. Looking at your example, it feels like you are confusing GSAP with something else. Many methods you have used are not part of GSAP API. In the demo below I am animating values of an object and using them to update the div, div is not directly being animated. You can see from example how you can use directional plugin. From what I tested, it is working as expected, see if it helps.
    2 points
  16. Read that post a while ago, and at the time I was building this little thing, it's kind of my summary what I learned in little above a year - hope you'll enjoy it https://www.hq-biosciences.com/our-process/ (animations above approx 767px) For me, GSAP was a blessing - special thanks, to @Ihatetomatoes you made it a thing in my life - finally, I could do some fun things with code and learn by doing instead of watching some crazy tutorials where you just use "this" and "this" and then I was just like this O_o Dropped school because of that dull programming theory - we started to learn to programme from "C" language (like WTF) I had a lot of attempts to learn JS but most of the stuff I could just copy/paste without even understanding or trying to understand. (This one helped me understand what's going on under the hood https://www.udemy.com/understand-javascript/ ) GSAP changed my life and made programming much easier to "eat" - I'll probably never be a kickass assembler programmer, but who knows - GSAP is a solid first sock to go anywhere and they should fking teach it at school. Thank you all for helping me in various quests, learning hard to help you too someday (that's hard! Even if I know the answer there are at least 2 answers already submitted - love you all
    2 points
  17. @Shaun Gorneau - great minds think alike and type at nearly the same speed. @Stagnax - you're welcome. Happy to help.
    2 points
  18. no shame. thanks for posting your solution. It very well could help someone in the future.
    1 point
  19. I'm assuming you want some kind of kinetic scrolling with a back or elastic ease at the end. The question is... are you planning to scroll the document or actually have scroll control an element. If it's the document you would want to animate the window with the scrollTo plugin. https://greensock.com/ScrollToPlugin Your animation is set up to try and animate the div element itself, in which case see Jack's answer. Also there a is a good discussion with solutions from Blake on a generally related topic here: Here's a mod to an existing pen that quickly demos a back ease with scrollTo and scrollMajic. Note: there needs to be a large enough offset on the trigger to avoid having the backEase's overscroll trigger the next animation.
    1 point
  20. Wow. You just made me realize that we are using this other library in our project. You are right man, thanks for pointing out, and of course, I prefer GSAP, as I used it for another projects (PIXIjs, SVG..) and it works like a charm. Rock on
    1 point
  21. Thank you so much!! I was also testing out with the timeline first.. But obvious i created the tweens twice..
    1 point
  22. Thanks, Sahil. It looks like the issue is related to the fact that he is using CSS to set transform values on those elements. Note in the CSS panel that I removed the transforms for #CN and #pattern. It causes odd placement of those elements of course but if you roll over the grey circle (which previously had opacity:0) you will see animation
    1 point
  23. Have you tried recording the values with progress() before playing the timeline? tl.progress(1).progress(0) // prerecords the values and properties upfront tl.play(); Might be worth a try. Happy tweening.
    1 point
  24. I get your point about the update events @GreenSock Jack and I agree to the why. It's easy to check if a value has changed ourselves and 99.9% of my usescases I don't need to, since most values are floats. This was the first in years. The function you put together looks very useful, thanks! You guys keep delivering great service and for so long, amazing! Keep up the great work!
    1 point
  25. Again thank you Craig, I'm learning a lot form the past few days.
    1 point
  26. Gahhhh!!!! Sorry @PointC ... just seconds after you :/
    1 point
  27. As a property of TimelineMax(); You can also "yoyo" the tween to get rid of a fromTo var tl= new TimelineMax({repeat:-1, yoyo: true});
    1 point
  28. Hi @Stagnax This should work for you. var tl= new TimelineMax({repeat:-1, yoyo:true}); tl.fromTo("#char", 1, { y: 100 }, { ease: Power0.easeNone, y: -100 }); Happy tweening.
    1 point
  29. I think I see the problem and I can just add " || type" after the event lookup. In other words: //BEFORE: element.addEventListener(_touchEventLookup[type], func, capture); //AFTER: element.addEventListener(_touchEventLookup[type] || type, func, capture); Here's an uncompressed version with that edit in place: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js Does that resolve things for you?
    1 point
  30. The first step into the darkness... Already demons of failure assault me. The bar doesn't start moving until too late, the actual code doesn't seem to work outside the debug mode of codePen - I imagine it is their order of loading, the JS doesn't run until all the other elements have loaded and so, ruins this version of it. And this is already far more convoluted than I expected this to be... Let us see what the next room in this dungeon will bring. @PointC I thank you for the encouragement and the brownie points. You know I am keeping tabs on them and one day I shall come to your door collect. @Visual-Q Aye! A man has to got to do what a man has got to do. And nowadays, a man has got to do also what a woman has got to do. ps: Lovely comment on how you defer loading your background images. I never thought of such simple thing. Great to see others chip in with their ways of doing things. We all end up learning a thing or two.
    1 point
  31. I figured this was actually becoming something I might find useful. So I did some more work. Brand new codebase. This now reverse toggles on click, and calculates size and position for however many columns of slides you want. A worthwhile exercise I learned several new things about GSAP and jQuery.
    1 point
  32. I added some logic for a clickable reverse that seems reliable.
    1 point
  33. This should get you going. Demonstrates the css and how you might do the expansion animation with your switch. Note that if you are expanding the panel to full width then your idea doesn't take into account reversing to the initial state. You're going to leave viewers with the expanded item and no way to escape it without additional logic.
    1 point
×
×
  • Create New...