acodeaday

I have been trying to implement async await but am yet to have any luck. here is the code I have at the moment: https://codepen.io/acodeaday/pen/eYKOKJO I can see from the console log that getRecipe is running, but timeline.to is not because it can't find the target. I thought maybe it's because I don't use a promise, but from the mozilla link you sent me it says " If the return value of an async function is not explicitly a promise, it will be implicitly wrapped in a promise." I tried to implement a promise into the get recipe function, but couldn't get it to work. Then i thought maybe it's because getRecipe doesn't return anything, but I wasn't sure what to return. If you could help me understand this a bit better I would really appreciate it. Sorry if this is the wrong place to ask about this.

Sorry I am very new to greensocks, and relatively new to coding in general. I don't know async and await is it a greensocks thing or a javascript thing? I will have to try to look up how to implement it. Would it be something that is applied to the getRecipe() function or the tween? When you say the duration shouldn't be applied to the timeline, should it be like this instead? timeline .to( '#recipeTitleContainer h2', { duration: 3, opacity: 1 }); And I have updated the API key, there should be 150 more searches now.

ok I managed to create a minimal demo. Now it works with the test, but not with the dynamic content: https://codepen.io/acodeaday/pen/eYKOKJO

And i guess i have two questions now. Is it possible to get this working without putting the timeline.to( ) inside of the event listener? Is how getRecipe works that is causing the problem, or is it likely something else?

And just to be clear, it is correct that it is recipeTitleContainer on the main site and not recipeContainer

Sorry, it may not be clear, I edited the codepen and got that working, but have not got the full version on my site working. Initially it was not working as I had timeline.to() outside of the event listener. I was getting the error GSAP target #recipeContainer h2 not found. Once I added it into the event listener it worked. However it doesn't work on my website, it does work on my website if i use a test div with already defined div/h2 but not if i try to use the dynamic elements. then i still face the element not found error. The only thing I can think of is how the getRecipe() function runs. Could it be that it is because the dynamic content that is added on the real site is from an api call that is parsed and the recipe titles are extracted from an array of objects then wrapped in the <h2> tags? So maybe it delays it further which is why it cannot be found? This is the code for getRecipe function getRecipe(){ let ingredients = document.querySelector('#ingredient').value // let numberOfMissingIngredients = document.querySelector('#missingIngredients').value //Url of spoonacular api, with authentication key(got by making an account). Type in ingredients to get an Array of Recipe titles let url =`https://api.spoonacular.com/recipes/complexSearch?&apiKey=2d7e0ded8af74b1897224317ce6c662c&includeIngredients=${ingredients}&addRecipeInformation=true&instructionsRequired=true&number=20&fillIngredients=true&addRecipeNutrition=true` fetch(url) .then(res => res.json()) // parse response as JSON .then(data => { console.log(data) //get the response(array) of the api console.log(data.results.length) //title of the first recipe //Add the the array of recipe objects to the global variable for access later recipeArray = data.results; console.log(`recipe array before ${recipeArray}`) //sort the recipes by least to most missing ingredients recipeArray = recipeArray.sort((a,b) => a.missedIngredientCount - b.missedIngredientCount) console.log(`recipe array after ${recipeArray}`) //This is a function that wraps the titles of the returned recipes in <h2> and <a> tags to input into the dom let recipeTitles = function(){ return recipeArray.map((el, i) => `<h2><a href="#" class="recipeTitles" id="${el.id}">${el.title}</a> -- ${el.missedIngredientCount} ingredient${el.missedIngredientCount > 1 ? 's' : ''} missing</h2>`).join('') } document.querySelector('#recipeTitleContainer').innerHTML = recipeTitles() //data.map(el => el === `<p>${el.title}</p>`) }) .catch(err => { console.log(`error ${err}`) }); }

I am trying to animate elements that are added to the DOM via javascript with GSAP. Here is the MRE: https://codepen.io/acodeaday/pen/RwJbrWa So I would like to change the opacity of the h2s. It is not working because the h2s don't exist when the page first loads, only once the button is clicked. I was hoping that setting it to paused and only having it play on click would fix the problem, but unfortunately not. If I change timeline .to( '#recipeContainer h2', { opacity: 1 } ) to timeline .to( '#test h2', { opacity: 1 } ) Then it works fine for that element. So it has to be the element being dynamically created but I haven't been able to find a solution. I've been reading the docs and it seems like I might be able to use TimelineMax and onComplete but I can't figure out how to implement it here. Thank you for any help.