Jump to content

Ultra Design Agency

  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Ultra Design Agency's Achievements



  1. oh wow- just saw carl's course. That looks like a great place to start.
  2. Thank you- for starters I didnt even know there was a gsap 3. I suppose a good start is going to be installing that in our starter template. I have seen a few paid courses here and there. Is that a useful avenue? If so, which would you recommend?
  3. Wow- what absolutely similar backgrounds we have. I too was a photographer/video person for many years. I too became tired of hucking gear and traveling and moved more into the interactive world in 2008. I am a very adept self promoter and soon began to stack up noted clients and my business grew into a respectable agency. I realized a few years ago that enjoyed being a craftsman much more than a manager. We went to a different business model wherein we scaled back the designers and coders, and I put myself back into design and development. Best decision I ever made, and surprisingly my income improved despite the drop in gross revenues. Fast forward a few years. Like yourself I felt like the sites we were selling weren't candidates for any fancy gsap stuff. - Bullshit. I have always said that if you always give your absolute best, no matter the scope or budget of a project, that you will be greatly rewarded. I need to be drinking the KoolAid. So, like you, I have decided to embark on the journey of learning JS, and ultimately GSAP. I have used various snippets here and there, but only what I have gleaned from the internet. So here is my question to you: What is the path of learning, what are the available tools, and what resources do you recommend I invest time and money into to get where I would like to go? I thank you for any direction you can offer. Perhaps our paths may cross someday! Jay Henry Ultra Design Agency https://ultradesignagency.com/
  4. Zach, I am very grateful for your help. I really would love to learn how to use this tool that we are paying for. I see many online tutorials etc. What would you recommend as a course of action to go from copy/paste to actual developing? I am eager to learn. Jay
  5. Here is my pen using the suggested code- https://codepen.io/ultradesignagency/pen/gObJdya any pointers o what I am missing here?
  6. I tried every possibility with the snippet you provided. I can't make it work. Maybe I am not using it in the correct place. I appreciate your help.
  7. Looping through each accordion. I believe if I can achieve that the rest should work...
  8. I have been googling, codepenning, foruming etc for two days. It's lack of knowledge, not lack of effort.
  9. Is there a tutorial that you might point me to? Or maybe an example somewhere? I image its close, as it is working with just one per page....
  10. Thank you- I wont be able to figure that out. I appreciate your help though.
  11. I think I have been able to offer what you were looking for, and I sincerely thank you for any help you can offer. This pen shows the correct functionality. You can see that it successfully divides each 'li.box' to fill the space designated which in this case is 1000px wide. https://codepen.io/ultradesignagency/pen/mdyYzbJ This pen shows that when a second accordion slider is added to the page the function accounts for all 'li.box' items on the page and not per slider. Thus the widths are wrong and it doesnt not fill the 1000px width of each slider. https://codepen.io/ultradesignagency/pen/gObJdya Thank you so much for your help. Jay
  12. Hello, We have come a long way with GSAP in the last several months however we have come across an issue we cannot seem to solve. We have an issue when we have two instances of our accordion slider on one page. Can you help us resolve this please? The markup looks like this: jQuery(function($){ var active; var boxes = $('.accordion-slider .box').length; var singleBoxWidth = (100 / boxes); var collapsedWidth = singleBoxWidth - ( singleBoxWidth / ( boxes - 1 ) ); var openWidth = 100 - (collapsedWidth * ( boxes - 1 ) ); function accordionSlider() { $('.accordion-slider .box').css('width', 100/boxes + '%' ) $('.accordion-slider .box').on('mouseenter', function(){ if ( !$(this).hasClass('active') && $(window).width() >= 551 ){ //hide active elements if( active ){ TweenLite.to(active.find('.accordion-slider-title'), 0.3, {opacity:0, overwrite:'all'}); TweenLite.to(active.find('.accordion-slider-content'), 0.3, {opacity:0, overwrite:'all'}); } //introduce new active elements var others = $('.accordion-slider .box').not(this); active = $(this); $(this).addClass('active'); others.removeClass('active'); var tl = new TimelineLite(); tl.to(others, 0.5, {width:collapsedWidth + '%'}, 0) .to(active, 0.5, {width:openWidth + '%'}, 0) .to(active.find('.accordion-slider-title'), 0.9, {opacity:1}, 0.3) .to(active.find('.accordion-slider-content'), 0.9, {opacity:1}, 0.4); } }); $('.accordion-slider .box').on('mouseleave', function(){ if ( $(window).width() >= 551 ){ var all = $('.accordion-slider .box'); var tl = new TimelineLite(); tl.to(all, 0.5, {width: 100/boxes + '%'}, 0) .to(active.find('.accordion-slider-title'), 0.3, {opacity:0, overwrite:'all'}, 0) .to(active.find('.accordion-slider-content'), 0.3, {opacity:0, overwrite:'all'}, 0) $(this).removeClass('active'); } }); if( $(window).width() < 551 ) { $('.accordion-slider-title, .accordion-slider-content').removeAttr('style'); $('.accordion-slider .box').removeClass('active').css('width', '100%'); } } accordionSlider() $(window).resize(function(){accordionSlider()}); });
  13. I was wondering if you could someone had a solution to keep an initial panel open on page load. Another request would be that the open panel is a bit wider. Any help would be awesome. I am doing the tutorials I promise!
  14. OK I got this svg to animate successfully, however I cannot seem to trigger it when it enters the viewport. I have tried about everything I can think of! Also, if I want more than one instance do I need a for each? My apologies for the learning curve.