Ultra Design Agency
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Ultra Design Agency
-
-
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?
-
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
-
2
-
-
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
-
Here is my pen using the suggested code-
See the Pen gObJdya by ultradesignagency (@ultradesignagency) on CodePen
any pointers o what I am missing here? -
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.
-
Looping through each accordion. I believe if I can achieve that the rest should work...
-
I have been googling, codepenning, foruming etc for two days. It's lack of knowledge, not lack of effort.
-
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....
-
Thank you- I wont be able to figure that out. I appreciate your help though.
-
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.
See the Pen mdyYzbJ by ultradesignagency (@ultradesignagency) on CodePen
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.
See the Pen gObJdya by ultradesignagency (@ultradesignagency) on CodePen
Thank you so much for your help.
Jay
-
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()});
}); -
-
Thank you so much!!!!!!!!!
-
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.
See the Pen JjPgqLj by ultradesignagency (@ultradesignagency) on CodePen
-
I really appreciate your patience. I know you have written this whole thing for me and that it is not your role. It looks amazing, I really appreciate it. Now I am going to see if I can tackle the 'unobserve' so it plays just once. Wish me luck!
-
1
-
-
I dont understand this 'If you're going to have a lot of these, you should create the timelines and attach a reference to them on the element itself. That way you can use
entry.timeline.play();or something like that inside of your intersection observer callback.'I promise once I get the gist I will be off and running
-
Can you point me to a simple example which would trigger the text animation you created for me when in viewport? I feel like this is all far more complicated than I thought it would be.
-
Very straightforward? Isn't there a simple way to say 'hey, this element is in the viewport so trigger it'?
-
OK I loaded this on DOMContentLoaded and it is working. Whew! Now, to see if I can figure out how to trigger this when in viewport with ScrollMagic. Any help would be so loved!
-
I am not sure why this is so complicated for me. Now I get the text animation to work, however it only works when I click the 'replay' button, and not on page load. Ultimately I need these H1 elements to load once they are in the viewport. I am using Magic Scroll. Any direction for a GSAP virgin?
-
Hate to bug you again- I am really struggling with putting that simple codepen to work on my webpage. I have called the two scripts, added the functions, and the css. It is not animating whatsoever. Any chance you would be able to help me troubleshoot?
https://ultrastarter.wpengine.com/
I can provide access if you need it as well.
-
One last question- the pen includes 13 scripts. Which ones would I need from that list?
-
Wow - you did all of this for me? I think we are going to be lifelong friends... Thank you!
-
2
-
-
yes- it looks like some sort of animated computer lettering- the text says 'More than 200 career options'.
One year of GreenSock forum participation – what I’ve experienced
in GSAP
Posted
oh wow- just saw carl's course. That looks like a great place to start.