Jump to content
GreenSock

Search the Community

Showing results for 'barba'.

  • 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

  • Learning Center
  • Blog

Categories

  • Products
  • Plugins

Categories

  • Examples
  • Showcase

Categories

  • FAQ

Categories

  • ScrollTrigger Demos

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. You can give Barba.js a try that works with simple HTML templates if you don't want to learn new framework, though at some point you will have to. Check the following thread that discusses Barba.js.
  2. Looks like there is already a solution for integrating with wordpress. Now I'm really stoked about barba this could allow me to combine pretty much everything I use in website. https://www.npmjs.com/package/wp-barba-page-preloader
  3. Others might have worked. I know that one can use Barba + GSAP and WordPress together as I've met others who have worked with it. I just haven't done myself. Hopefully someone will chime in on the matter is you'll find enough information in the other threads.
  4. ZachSaucier and Dipscom, thanks for feedback. I thought someone could have had the same problem using barba.js, GSAP and wordpress, because I see many sites that use GSAP with page transitions, I will keep searching.
  5. So i'm having trouble getting an SVG to draw when the index.html is first reached. The problem only seems to be on chrome for mac, the animation works fine on any other browser and loads on page load as intended. The SVG will also start to draw as soon as the page is refreshed, just not on the first load automatically. I am using barbajs for smooth internal page navigation and have included all my tweens in the relevant page 'onEnter' function, i guess this is why its working on the other browsers. var Indexpage = Barba.BaseView.extend({ namespace: 'indexpage', onEnter: function() { var drawlogo = new TimelineMax(); // TweenMax.from("main.home",8,{autoAlpha:0}); TweenMax.to("main.home", 1, {autoAlpha:1, ease: Expo.easeOut, force3D:true}); TweenMax.from(".logotop",2,{autoAlpha:0}); TweenMax.from(".frontlogo1,.frontlogo2",5,{drawSVG:0}); TweenMax.to("main.home",1,{autoAlpha:0,delay:5}); TweenMax.to(".logotop",1,{autoAlpha:0,delay:5}); TweenMax.to(".frontlogo1,.frontlogo2",1,{autoAlpha:0,delay:5}); TweenMax.from(".logoblue",2,{autoAlpha:1,x:-220,ease: Expo.easeOut,delay:4.8}); TweenMax.from(".burger",1,{autoAlpha:1,x:100,ease: Expo.easeOut,delay:4.6}); TweenMax.to("#intro",3,{autoAlpha:1,ease:Expo.easeOut,delay:5.8}); TweenMax.to("#sectionone",3,{autoAlpha:1,ease:Expo.easeOut,delay:6}); TweenMax.to("#sectiontwo",3,{autoAlpha:1,ease:Expo.easeOut,delay:6.2}); TweenMax.to("#sectionthree",3,{autoAlpha:1,ease:Expo.easeOut,delay:6.4}); TweenMax.to("#contactus",3,{autoAlpha:1,ease:Expo.easeOut,delay:6.6}); console.log("enter"); }, onEnterCompleted: function() { // TweenMax.to("main.home", 1, {autoAlpha:1, ease: Expo.easeOut, force3D:true}); // TweenMax.to(".title-container *", 1, {autoAlpha:1, ease: Expo.easeOut, force3D:true}, 0.1); }, onLeave: function() { }, onLeaveCompleted: function() { // The Container has just been removed from the DOM. } }); // Don't forget to init the view! Indexpage.init(); Ive tried adding the tweens to barbas default fade in function but as expected, doesn't effect anything. Maybe i'm missing something simple?
  6. Yup, it doesn't work. I tried using clearProps like this below. Paused tweens doesn't reinit. Barba.Dispatcher.on('transitionCompleted', function(currentStatus, prevStatus) { for (var i = 0; i < element.length; i++) { element[i].anim = TweenLite.to(element[i], {clearProps:"all"}); } });
  7. @GreenSock Thank you for the response. Yup totally understand that! I sucked it up & spent the last 40 mins getting it down to... well... still a lot of code but I've noted the problem area on lines 76 - 120. The previous code is needed for the menu to open (needed to show you the problem) and the code after is just to init barba (also needed to show you in context) Sorry for the jumble but it's the best I can do lol. Maybe you can make something of it? Cheers, Will https://codepen.io/wsdesign/project/editor/XveMOR
  8. rakan

    circle rotation

    @Shaun Gorneau @Rodrigo Thanks.. But how can I stop rotation after loading the page? Also I'm using barba.js to transit between pages so when I go to the next page, the animation doesn't work. Why it doesn't work as when I refresh the page? https://codepen.io/rakan49/pen/OdwMVY
  9. I have been using BarbaJs on some recent projects, and I have been through this same challenge. The solution I found to redefine the elements for the initial states is to use the BarbaJs Views system (see how it works at this link). Then when rendering the new Container you can use the ClearProps or TweenMax.set or TweenMax.fromto, in the event: let Homepage = Barba.BaseView.extend({ namespace: 'homepage', onEnterCompleted: function() { TweenMax.fromTo($el, time, {stateInitial},{stateTarget}) } }); Homepage.init(); I hope this helps you. Any questions just ask.
  10. You can have either one or another. What you can do though is check referrer on your server side and decide which class to add, if it is your site then don't show loader if it is external url then show loader. If you don't want to mess with server-side then look into barba js http://barbajs.org/
  11. Hi @redfawx Welcome to the forum and thanks for joining Club GreenSock. That's quite a bit of code and we just don't have the resources to review entire sites and offer general advice. I personally have no experience with Barba.js, but there are a few threads about it. Here are a couple. As for ScrollMagic, my advice would be to use the addIndicators() plugin while you're working to help you identify any problems. http://scrollmagic.io/docs/debug.addIndicators.html If you have specific GSAP problems or questions, we're happy help. Providing a demo will get you the best possible answers. More info: Happy tweening.
  12. Hey @miks, thanks for the Codepen, I have forked it. It works really well, plus it really help me kickstart Barba.js! For anyone else who needs more help in making the animation smoother, I added another class to animate the position of the logo itself, and added it in the timeline with tweenmax. Here's the edited pen: https://codepen.io/aahlfeeyann/project/editor/DWnwop
  13. Haha, its alright @miks, I understand what you try to do. I am just not sure how to apply it as a page transition. If you managed to do it with barba.js or smoothstate.js do let me know!
  14. Hi, Disregard what I just written hahaha. I just saw the video on the phone and comment on the phone. I saw that its more on transition. What I did is only animation. Now I need to try barba.js
  15. Yo! I think you can just add a listener on every link on your page that would trigger the animation. You can even use bodymovin for your animation or the best solution is use barba.js or smoothstate.js?
  16. Also check out this discussion with a couple of frameworks that do this sort of thing, Barba js might be what you're looking for.
  17. I think this is the first question I've seen that dealt specifically with localStorage. Yes, you can use local/sessionStorage to keep track of what animations have played, but for a smooth transition between page transitions without a jarring page load, you really need to use some type of AJAX/SPA based loading technique. Don't know if you saw this page, but it has a couple of other suggestions like jQuery and barba.js.
  18. That didn't seem to get me any further, I think these kind of animations are still a bit out of my league. I'll get to studying some more JS and try to do this in the future. For now I'll go with the Animsition route which is working fine although the Barba way seems a bit more robust. Thanks for the help anyway, seems like a great community here!
  19. We were discussing the issue of animations between page linking on this post https://greensock.com/forums/topic/17740-page-transitions-with-loading-element/ There are some interesting frameworks that handle this sort of thing particularly barba.js.
  20. According to the transition page on the barba.js site you can create animation based on any library, and quite easily, so GSAP should be a go for sure with this. I'll be very interested to see if you can make workable with WP. Good luck.
  21. Thanks again for the feedback! I'm going to try out both Animsition and BarbaJS and see where I end up. The initial idea was just to have an out transition, then a white screen with loader and an in transition which I managed to do with Animsation. Barba.js does look interesting indeed if I can make it work with WP. I'm not keen on the one-page idea as the website contains alot of different pages and projects. I'll keep you posted on the progress though if I come up with a solution! Thanks!
  22. I use barba.js and only change loaded to true when the respective promise gets fulfilled. First time using promises; strange at first, but I guess I'll get the hang of it and start to see the advantages.
×